鸿蒙状态管理-@Builder自定义构建函数

crush_yyqx2024-06-05 22:06

@Builder 将重复使用的UI元素抽象成一个方法在build方法里调用使其成为自定义构建函数

@Entry
@Component
struct BuilderCase {
  build() {
    Column(){
      Row(){
        Text("西游记")
          .fontSize(20)
      }
      .justifyContent(FlexAlign.Center)
      .backgroundColor("#f3f4f5")
      .height(60)
      .borderRadius(8)

      .width("100%")
      .padding({
        left:20,
        right:20
      })
    }
    .padding(20)
  }
}

将其中项抽离出来

@Entry
@Component
struct BuilderCase {
  @Builder
  getItemBuilder(itemName:string){
    Row(){
      Text(`${itemName}`)
        .fontSize(20)
    }
    .justifyContent(FlexAlign.Center)
    .backgroundColor("#f3f4f5")
    .height(60)
    .borderRadius(8)

    .width("100%")
    .padding({
      left:20,
      right:20
    })
  }

  build() {
    Column({ space:20 }){
      this.getItemBuilder("西游记")
      this.getItemBuilder("水浒传")
      this.getItemBuilder("红楼梦")
      this.getItemBuilder("三国演义")
    }
    .padding(20)
  }
}

同时我们也可以利用循环生成简化代码

 @State
  list:string[]=[ '西游记','水浒传','红楼梦','三国演义', ]


      ForEach(this.list,(item:string)=>{
        this.getItemBuilder(item)
      })