鸿蒙Next中@link和@builder如何使用

在鸿蒙Next开发中，@link和@builder的具体使用场景和区别是什么？能否提供一些实际的代码示例来说明如何正确使用这两个装饰器？比如在组件间跳转或动态构建UI时的典型用法。另外，使用过程中有哪些需要注意的常见问题？

2 回复

在鸿蒙Next里，@link就像个“传话筒”，帮你跨组件传数据，比如@Link value: number；而@builder是个“施工队”，负责动态造UI，比如@Builder MyButton() { Button('点我') }。一个管通信，一个管盖楼，分工明确！

更多关于鸿蒙Next中@link和@builder如何使用的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next（HarmonyOS NEXT）中，@link 和 @builder 是 ArkTS 中常用的装饰器，用于组件间通信和构建可复用的 UI 片段。以下是具体使用方法：

1. @link 的使用

@link 用于父子组件之间的双向数据绑定，确保数据同步更新。

语法：

@Link variableName: type;

示例：

  • 父组件传递数据给子组件，使用 $ 符号创建双向绑定。
// 子组件
@Component
struct ChildComponent {
  @Link count: number; // 使用 @link 接收数据

  build() {
    Button(`子组件计数: ${this.count}`)
      .onClick(() => {
        this.count++; // 修改会同步到父组件
      })
  }
}

// 父组件
@Entry
@Component
struct ParentComponent {
  @State parentCount: number = 0; // 父组件的状态数据

  build() {
    Column() {
      Text(`父组件计数: ${this.parentCount}`)
      ChildComponent({ count: $parentCount }) // 通过 $ 传递双向绑定
    }
  }
}

说明：子组件通过 @Link 接收数据，修改 count 会直接更新父组件的 parentCount。

2. @builder 的使用

@builder 用于定义可复用的 UI 构建函数，支持参数传递，类似自定义组件但更轻量。

语法：

@Builder MyBuilderFunction(args?) {
  // UI 内容
}

示例：

  • 无参数 builder：
@Component
struct MyComponent {
  @Builder simpleBuilder() {
    Text('这是一个Builder示例')
      .fontSize(20)
      .fontColor(Color.Blue)
  }

  build() {
    Column() {
      this.simpleBuilder() // 调用 builder
    }
  }
}
  • 带参数 builder：
@Component
struct MyComponent {
  @Builder paramBuilder(message: string, count: number) {
    Column() {
      Text(`消息: ${message}`)
      Text(`计数: ${count}`)
    }
  }

  build() {
    Column() {
      this.paramBuilder('Hello', 10) // 传递参数
    }
  }
}
  • 全局 builder（在组件外定义）：
@Builder function GlobalBuilder(title: string) {
  Text(title).fontSize(18)
}

@Component
struct AnotherComponent {
  build() {
    Column() {
      GlobalBuilder('全局Builder') // 直接调用
    }
  }
}

关键区别：

  • @link：用于数据流管理，实现双向绑定，适用于需要父子组件数据同步的场景。
  • @builder：用于 UI 复用，减少代码重复，提升可维护性。

根据需求选择使用：若需数据同步用 @link；若需封装 UI 片段用 @builder。

回到顶部