【鸿蒙南向开发】OpenHarmony自定义构建函数:@Builder装饰器

前面章节介绍了如何创建一个自定义组件。该自定义组件内部UI结构固定,仅与使用方进行数据传递。ArkUI还提供了一种更轻量的UI元素复用机制@Builder,@Builder所装饰的函数遵循build()函数语法规则,开发者可以将重复使用的UI元素抽象成一个方法,在build方法里调用。

为了简化语言,我们将@Builder装饰的函数也称为"自定义构建函数"。

说明:

从API version 9开始,该装饰器支持在ArkTS卡片中使用。

装饰器使用说明

自定义组件内自定义构建函数

定义的语法:

复制代码
@Builder MyBuilderFunction() { ... }

使用方法:

复制代码
this.MyBuilderFunction() { ... }

● 允许在自定义组件内定义一个或多个自定义构建函数,该函数被认为是该组件的私有、特殊类型的成员函数。

● 自定义构建函数可以在所属组件的build方法和其他自定义构建函数中调用,但不允许在组件外调用。

● 在自定义函数体中,this指代当前所属组件,组件的状态变量可以在自定义构建函数内访问。建议通过this访问自定义组件的状态变量而不是参数传递。

全局自定义构建函数

定义的语法:

复制代码
@Builder function MyGlobalBuilderFunction() { ... }

使用方法:

复制代码
MyGlobalBuilderFunction()

● 全局的自定义构建函数可以被整个应用获取,不允许使用this和bind方法。

● 如果不涉及组件状态变化,建议使用全局的自定义构建方法。

参数传递规则

自定义构建函数的参数传递有 按值传递 和 按引用传递 两种,均需遵守以下规则:

● 参数的类型必须与参数声明的类型一致,不允许undefined、null和返回undefined、null的表达式。

● 在@Builder修饰的函数内部,不允许改变参数值。

● @Builder内UI语法遵循 UI语法规则 。

按引用传递参数

按引用传递参数时,传递的参数可为状态变量,且状态变量的改变会引起@Builder方法内的UI刷新。ArkUI提供$$作为按引用传递参数的范式。

复制代码
class ABuilderParam {
  paramA1: string = ''
  paramB1: string = ''
}
 
@Builder function ABuilder($$ : ABuilderParam) {...}
class ABuilderParam {
  paramA1: string = ''
}
 
@Builder function ABuilder($$: ABuilderParam) {
  Row() {
    Text(`UseStateVarByReference: ${$$.paramA1} `)
  }
}
@Entry
@Component
struct Parent {
  @State label: string = 'Hello';
  build() {
    Column() {
      // Pass the this.label reference to the ABuilder component when the ABuilder component is called in the Parent component.
      ABuilder({ paramA1: this.label })
      Button('Click me').onClick(() => {
        // After Click me is clicked, the UI text changes from Hello to ArkUI.
        this.label = 'ArkUI';
      })
    }
  }
}

按值传递参数

调用@Builder装饰的函数默认按值传递。当传递的参数为状态变量时,状态变量的改变不会引起@Builder方法内的UI刷新。所以当使用状态变量的时候,推荐使用 按引用传递 。

复制代码
@Builder function ABuilder(paramA1: string) {
  Row() {
    Text(`UseStateVarByValue: ${paramA1} `)
  }
}
@Entry
@Component
struct Parent {
  label: string = 'Hello';
  build() {
    Column() {
      ABuilder(this.label)
    }
  }
}
相关推荐
Ronin-Lotus6 分钟前
嵌入式硬件篇---zigbee无线串口通信问题
嵌入式硬件·zigbee·无线串口
GalaxySinCos34 分钟前
08 51单片机之串口通信
单片机·嵌入式硬件·51单片机
悠哉悠哉愿意43 分钟前
【电赛学习笔记】MaxiCAM 项目实践——与单片机的串口通信
笔记·python·单片机·嵌入式硬件·学习·视觉检测
李永奉3 小时前
STM32-定时器的基本定时/计数功能实现配置教程(寄存器版)
c语言·开发语言·stm32·单片机·嵌入式硬件
codefish7984 小时前
鸿蒙开发学习之路:从入门到实践的全面指南
harmonyos
糖糖单片机设计4 小时前
硬件开发_基于STM32单片机的电脑底座系统
stm32·单片机·嵌入式硬件·物联网·51单片机
IT项目分享6 小时前
ESP32入门实战:PC远程控制LED灯完整指南
单片机·嵌入式硬件·micropython·it项目网
yrjw9 小时前
一款基于react-native harmonyOS 封装的【文档】文件预览查看开源库(基于Harmony 原生文件预览服务进行封装)
harmonyos
风吹花中花吹风10 小时前
原创-锐能微82xx系列电能计量芯片软件驱动开发与精度校准流程完全指南
驱动开发·单片机·嵌入式硬件·锐能微·计量芯片·精度校准·电能表校准
青牛科技-Allen15 小时前
GC8871刷式直流电机驱动器深度解析:3.6A驱动与内置电流检测技术
单片机·嵌入式硬件·音视频·音响·电动工具·散热风扇·电脑散热风扇