有时候我们的App会有列表页面，比如商品列表，我们希望代码变得更加美观，可行性更强，不希望全部UI代码都放在一个build()方法内部，这样显得过于臃肿，于是我们可以使用构建函数来优化我们的代码。
一、全局构建函数
使用@Builder function关键字ItemCard为方法名，将代码块放于文件头部。大家要习惯，假如是Java的函数方法，这里必然是要return一个ItemView对象出去的，这就是鸿蒙ArkTs的精妙之处吧。
/**
* 全局构建函数
* @param item
*/
@Builder function ItemCard(item: Item){
Row({ space: 10 }) {
Image(item.image)
.width(100)
Column({ space: 4 }) {
if (item.discount) {
Text(item.name)
Text('原价：￥' + item.price)
.fontColor('#ccc')
.fontSize(18)
.decoration({ type: TextDecorationType.LineThrough })
Text('折扣价：￥' + (item.price - item.discount))
.fontColor('#f36')
.fontSize(18)
Text('补贴：￥' + item.discount)
.fontColor('#f36')
.fontSize(18)
} else {
Text(item.name)
Text('￥' + item.price)
.fontColor('#f36')
.fontSize(18)
}
}
.height('100%')
.alignItems(HorizontalAlign.Start)
.justifyContent(FlexAlign.Center)
}
.width('100%')
.borderRadius(20)
.backgroundColor('#fff')
.height(120)
.padding(10)
}
二、使用全局构建函数
List({ space: 8 }) {
ForEach(this.items, (item: Item, index) => {
ListItem() {
ItemCard(item)
}
})
}
三、定义局部构建函数
/**
* 局部构建函数（内部使用）
* @param item
*/
@Builder ItemCard(item: Item) {
//重复代码...略
}
四、使用局部构建函数
调用构建函数时，需要使用this关键字
List({ space: 8 }) {
ForEach(this.items, (item: Item, index) => {
ListItem() {
this.ItemCard(item)
}
})
}
