如何在 HarmonyOS NEXT 中使用 @Builder 装饰器优化 UI 组件的复用？

摘要

在鸿蒙 NEXT 开发中，@Builder 装饰器是一种轻量级的 UI 元素复用机制，它允许开发者将重复使用的 UI 元素抽象成一个方法，并在 build() 方法中多次调用，以实现 UI 结构的复用。以下是如何使用 @Builder 装饰器来优化 UI 组件复用的详细介绍和案例分析：

自定义构建函数

@Builder 方法可以定义在组件内或全局，用于封装可复用的 UI 结构。在组件内定义的 @Builder 方法可以通过 this 访问当前组件的属性和方法，而全局的 @Builder 方法则不能访问组件内部的属性和方法。

组件内 @Builder 方法：

@Entry
@Component
struct BuilderPage {
  build() {
    Column() {
      Row({ space: 50 }) {
        // 复用 UI 结构
        this.compButtonBuilder($r('app.media.icon_edit'), '编辑', () => console.log('编辑'));
        this.compButtonBuilder($r('app.media.icon_send'), '发送', () => console.log('发送'));
      }
    }.width('100%').height('100%').justifyContent(FlexAlign.Center);
  }
  // 定义 UI 结构
  @Bui