前言

@Builder 不仅可以在组件内定义，还可以定义为全局构建函数跨文件复用，或使用 @BuilderParam 接收外部传入的构建片段，实现更灵活的 UI 复用。

本文以「猫猫大作战」的按钮样式复用为锚点，讲解 @Builder 的全局定义和参数传递。

提示：本系列不讲 ArkTS 基础语法与环境搭建，假设你已跟完第 1–103 篇。本篇是阶段三第 104 篇。

一、全局 @Builder

// SharedBuilders.ets
@Builder
export function PrimaryButton(text: string, onClick: () => void) {
  Button(text)
    .width('80%').height(48)
    .backgroundColor('#2ECC71')
    .borderRadius(24)
    .fontColor('#FFF')
    .fontWeight(FontWeight.Bold)
    .onClick(onClick)
}

// Index.ets
import { PrimaryButton } from './SharedBuilders';

this.PrimaryButton('开始游戏', () => this.startGame())
this.PrimaryButton('继续', () => this.resumeGame())

二、@BuilderParam

@Component
struct CardContainer {
  @BuilderParam content: () => void = this.emptyBuilder;

  @Builder
  emptyBuilder() {}

  build() {
    Column() {
      this.content()
    }
    .padding(16)
    .backgroundColor('#FFF')
    .borderRadius(12)
  }
}

三、总结

@Builder 支持全局定义跨文件复用，@BuilderParam 支持外部传入构建片段。

核心要点：

• 全局 @Builder 函数可 export 跨文件复用
• @BuilderParam 接收外部传入的构建片段

下一篇预告：第 105 篇将深入 wrapBuilder——跨组件传递 Builder 的高级用法。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

• @Builder 装饰器文档
• @BuilderParam 文档
• 开源鸿蒙跨平台社区
• 第 103 篇：StatItem
• 第 105 篇：wrapBuilder