@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 {@BuildergetItemBuilder(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)}
}
同时我们也可以利用循环生成 简化代码
@Statelist:string[]=[ '西游记','水浒传','红楼梦','三国演义', ]ForEach(this.list,(item:string)=>{this.getItemBuilder(item)})
)
