鸿蒙 ArkUI-构建函数

有时候我们的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)
       }
  })
}