介绍

@Builder 是一个非常实用的装饰器，用于定义 可复用的 UI 片段（自定义组件），可以在组件的 build() 方法中直接调用，提高代码 复用性 和 可读性

使用场景

• 多次重复出现的 UI 片段，如：列表项、按钮组等重复 UI 元素
• 需要根据不同参数动态生成的 UI 元素
• 复杂布局的分块构建，提升代码可读性
• 作为组件间通信的方式，让父组件定制子组件的部分 UI

用法

步骤

1. 定义 Builder 函数：使用 @Builder 装饰器修饰一个函数，函数内部 只能编写 UI 结构（否则报错）

2. 调用 Builder 函数：在 build() 方法中，通过 this.函数名() 调用

例子

实现展示商品名称、价格的功能，如下图：

定义 Builder 函数

该函数中实现展示商品名称、价格功能

@Builder
showItem(name:string,price:number){
  Column(){
    Text(name)
    Text("￥"+price)
      .fontColor("red")
  }
  .alignItems(HorizontalAlign.Start)
  .margin({
    bottom:10
  })
  // .border({width:1})
}

调用 Builder 函数

build() {
  Column() {
    this.showItem("iphone20发布", 12000)
    this.showItem("iphone20 pro",15000)
    this.showItem("iphone20 pro max",20000)
    this.showItem("华为 mate 100",13000)

  }
  .alignItems(HorizontalAlign.Start)
}

原文出处：/show_1GW1yX2Ajh5T.html