HarmonyOS 鸿蒙Next 【HM】使用@Builder装饰器，顺便要知道@BuilderParam，且注意this的指向

[@Builder](/user/Builder)装饰器修饰的函数是自定义构造函数，可以定义组件内构造函数，也可以定义全局构造函数，提供给外部组件使用。

就是通过自定义构造函数，可以把build(){// UI元素} 构造函数内的UI部分，抽离出来封装成一个函数，在函数前面加上[@Builder](/user/Builder)装饰器，则为自定义构造函数，且只能在build()构造函数内调用。

```cpp
export default struct Father {

// 分割线
Divider()
  .color(Color.Red)
  .lineCap(LineCapStyle.Round)

[@Builder](/user/Builder) 
function myBuilder() {

// 分割线
Divider()
  .color(Color.Red)
  .lineCap(LineCapStyle.Round)

[@Builder](/user/Builder) function GlobalBuilder() {

// 分割线
Divider()
  .color(Color.Red)
  .lineCap(LineCapStyle.Round)

原有的build()构造函数可改为：

build(){
this.myBuilder();
// 或
GlobalBuilder();
}

@BuilderParam 装饰器在子组件中定义，

[@BuilderParam](/user/BuilderParam) 
placeHolder: () => void = () => {
};

// 占位
Column() {

// 占位
this.placeHolder();

那么，在父组件Father中使用Son组件时，就可以在构造函数中传入自定义构造函数给子组件，

build(){
Son({
placeHolder : this.myBuilder
// 或
placeHolder : GlobalBuilder;
})
}

更多关于HarmonyOS 鸿蒙Next 【HM】使用@Builder装饰器，顺便要知道@BuilderParam，且注意this的指向的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

yibo5220 1楼•9 天前

在HarmonyOS中，@Builder装饰器用于定义一个可复用的UI构建函数，允许开发者将UI组件封装为一个函数，并在需要时调用。@BuilderParam则用于传递@Builder函数作为参数，使得UI构建更加灵活。

@Builder装饰器的使用示例如下：

@Builder
function MyBuilder() {
  Text('Hello, HarmonyOS')
    .fontSize(20)
    .fontColor(Color.Black)
}

在组件中使用@Builder函数：

@Component
struct MyComponent {
  build() {
    Column() {
      MyBuilder()
    }
  }
}

@BuilderParam用于接收@Builder函数作为参数，示例如下：

@Component
struct MyComponent {
  @BuilderParam builder: () => void

  build() {
    Column() {
      this.builder()
    }
  }
}

在使用@BuilderParam时，可以通过父组件传递@Builder函数：

@Entry
@Component
struct ParentComponent {
  @Builder
  function ParentBuilder() {
    Text('Hello from Parent')
      .fontSize(20)
      .fontColor(Color.Blue)
  }

  build() {
    Column() {
      MyComponent({ builder: this.ParentBuilder })
    }
  }
}

关于this的指向，在@Builder函数中，this指向当前组件的实例。如果@Builder函数在组件外部定义，this将指向全局对象。因此，在@Builder函数中访问组件属性时，需确保this指向正确。

总结：@Builder用于定义可复用的UI构建函数，@BuilderParam用于传递@Builder函数，this的指向需根据上下文确定。

sinazl 2楼•9 天前

在HarmonyOS鸿蒙Next中，@Builder装饰器用于定义可复用的UI组件构建函数，而@BuilderParam则用于传递这些构建函数。使用@Builder时，需注意this的指向问题，确保在构建函数内部正确访问组件实例的属性和方法。例如：

@Builder
function customButtonBuilder() {
  Button(this.label) // 确保this指向正确
    .onClick(() => {
      console.log('Button clicked');
    });
}

@Entry
@Component
struct MyComponent {
  @BuilderParam buttonBuilder: () => void = customButtonBuilder;

  build() {
    Column() {
      this.buttonBuilder();
    }
  }
}

通过合理使用@Builder和@BuilderParam，可以提升代码的复用性和可维护性。