【鸿蒙南向开发】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)
    }
  }
}
相关推荐
DebugKitty12 分钟前
硬件开发1-51单片机4-DS18B20
单片机·嵌入式硬件·51单片机·ds18b20
Hello_Embed13 分钟前
STM32HAL 快速入门(十九):UART 编程(二)—— 中断方式实现收发及局限分析
笔记·stm32·单片机·嵌入式硬件·学习
沐欣工作室_lvyiyi17 分钟前
基于单片机的可燃性气体泄漏智能报警系统
stm32·单片机·嵌入式硬件·毕业设计
殷忆枫1 小时前
基于STM32物联网冻保鲜运输智能控制系统
stm32·嵌入式硬件·物联网
武文斌771 小时前
单片机:DS18B20测温度、74HC595扩展芯片、8*8LED矩阵
运维·服务器·单片机·嵌入式硬件
爱笑的眼睛112 小时前
HarmonyOS 应用开发新范式:深入剖析 Stage 模型与 ArkTS 状态管理
华为·harmonyos
爱笑的眼睛113 小时前
深入浅出 HarmonyOS ArkUI 3.0:基于声明式开发范式与高级状态管理构建高性能应用
华为·harmonyos
hardStudy_h3 小时前
GPIO介绍
单片机·嵌入式硬件
xyx-3v3 小时前
STM32的USART的数据寄存器只有一个吗?
stm32·单片机·嵌入式硬件
古译汉书3 小时前
嵌入式铁头山羊stm32-ADC实现定时器触发的注入序列的单通道转换-Day26
开发语言·数据结构·stm32·单片机·嵌入式硬件·算法