【鸿蒙南向开发】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)
    }
  }
}
相关推荐
RaLi和夕4 小时前
嵌入式学习笔记2.GPIO的工作模式
stm32·单片机·嵌入式硬件
学不动CV了5 小时前
FreeRTOS---任务级和中断级临界区管理使用的理解与源码分析
c语言·arm开发·stm32·单片机·嵌入式硬件·51单片机
Stanford_11066 小时前
关于单片机的原理与应用!
c++·单片机·嵌入式硬件·微信小程序·微信公众平台·微信开放平台
GilgameshJSS6 小时前
STM32H743-ARM例程10-WWDG
c语言·arm开发·stm32·单片机·嵌入式硬件
JiaWen技术圈7 小时前
关于机器人的物理结构(连杆、关节、执行器)的快速入门介绍
人工智能·单片机·嵌入式硬件·机器人·硬件架构
无风听海8 小时前
HarmonyOS之 @Provide 装饰器实现跨组件双向状态同步
华为·harmonyos
安卓开发者8 小时前
鸿蒙NEXT传统蓝牙开发指南:从基础到实战的完整解决方案
harmonyos
zhmc9 小时前
MCU的取指周期与等待周期以及预取指令机制
单片机·嵌入式硬件
代码79729 小时前
使用会话存储时,处理存储信息加密问题
深度学习·算法·自动化·散列表·harmonyos
big\hero10 小时前
STM32智能加湿器
stm32·单片机·嵌入式硬件