ArkTS @Builder装饰器的用法（非常详细）

在开发的过程中，当页面中有多个相同的 UI 结构时，如果每个都单独声明，会造成大量的重复代码。为了避免产生重复的代码，我们可以将相同的 UI 结构提炼为一个自定义组件，用于完成 UI 结构的复用。

ArkTS 提供了一种更轻量的 UI 结构复用机制，叫做 @Builder 装饰器。开发者可以将重复使用的 UI 元素抽象成一个 @Builder 方法，该方法可在 build() 方法中多次调用，以完成 UI 结构的复用。

@Builder 的使用分为组件内的使用和全局的使用，下面通过两个例子来进行讲解。

ArkTS @Builder在组件内的使用

@Builder 在组件内使用的语法是：

• 定义结构时要放在 struct 的里面进行定义，也就是在组件内定义；
• 定义的语法是：@Builder xxxx(){ ... }，其中 xxxx 是自定义的名称；
• 在组件内使用“this.自定义名称”的方式进行使用，如 this.xxxx()。

示例代码如下：

@Entry
@Component
struct Demo_Builder_in {
  @State message: string = 'Hello World';

  build() {
    Column() {
      Row({ space: 50 }) {
        // 复用 UI 结构
        this.compButtonBuilder('编辑', () => console.log('编辑'));
        this.compButtonBuilder('发送', () => console.log('发送'));
      }
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center);
  }

  // 定义 UI 结构
  @Builder compButtonBuilder(text: string, callback: () => void) {
    Button() {
      Row({ space: 10 }) {
        Text(text)
          .fontColor(Color.White)
          .fontSize(25);
      }
    }
    .width(120)
    .height(50)
    .onClick(callback);
  }
}

在示例代码中，在 build 的同级中使用 @Builder 来装饰一个自定义的函数名称，用来定义 UI 结构，自定义函数接收两个参数，text 和事件回调；在 build 组件中使用“this.自定义函数名”的方式来复用我们定义的UI结构。

效果如下图所示：

ArkTS @Builder在全局的使用

@Builder 在全局的使用与在UI组件内部的使用是有一些区别的，主要区别如下：

• 定义结构时要放在 struct 的外面进行定义，也就是在全局定义；
• 定义的语法是：@Builder function xxxx(){}，其中 xxxx 是自定义的名称；
• 直接在组件内使用自定义名称即可，如 xxxx()。

示例代码如下：

// 全局定义 UI 结构
@Builder function globalButtonBuilder(text: string, callback: () => void) {
  Button() {
    Row({ space: 10 }) {
      Text(text)
        .fontColor(Color.White)
        .fontSize(25);
    }
  }
  .width(120)
  .height(50)
  .onClick(callback);
}

@Entry
@Component
struct Demo_Builder_global {
  @State message: string = 'Hello World';

  build() {
    Column() {
      Row({ space: 50 }) {
        // 复用 UI 结构
        globalButtonBuilder('编辑', () => console.log('编辑'));
        globalButtonBuilder('发送', () => console.log('发送'));
      }
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center);
  }
}

在上述示例代码中，在 struct 的外面使用 @Builder function xxxx(){} 来定义 UI 结构，自定义函数接收两个参数，text 和事件回调；在 build 的组件中使用自定义函数名的方式来复用我们定义的 UI 结构。效果如图 1 所示。