【鸿蒙实战开发】@Builder装饰器：如何自定义构建函数

● 允许在自定义组件内定义一个或多个@Builder方法。

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

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

定义：

@Builder function MyGlobalBuilderFunction() { … }

使用：

MyGlobalBuilderFunction()

按引用传递参数（状态变量的改变会引起UI刷新）
按引用传递参数时，传递的参数可为状态变量，且状态变量的改变会引起@Builder方法内的UI刷新。

class Tmp {
  paramA1: string = ''
}
 
@Builder function overBuilder(params: Tmp) {
  Row() {
    Text(`UseStateVarByReference: ${params.paramA1} `)
  }
}
@Entry
@Component
struct Parent {
  @State label: string = 'Hello';
  build() {
    Column() {
      // 传递this。当在父组件中调用overBuilder组件时，标记对overBuilder组件的引用。
      overBuilder({ paramA1: this.label })
      Button('Click me').onClick(() => {
        // 单击Click me后，UI文本从Hello变为ArkUI
        this.label = 'ArkUI';
      })
    }
  }
}

如果在@Builder方法内调用自定义组件，ArkUI提供$作为按引用传递参数的范式。<