（5）食物列表页

 

1.食物列表页

 1.头部导航

 build() {
    Column() {
      // 1.头部导航
      this.Header()
      //2.列表
    }
    .width('100%')
    .height('100%')
  }
  @Builder Header() {
    Row() {
      Image($r('app.media.ic_public_back'))
        .width(24)
        .onClick(() => router.back())//点击后返回
      Blank()
      Text('早餐').fontSize(18).fontWeight(CommonConstants.FONT_WEIGHT_600)
    }
    .width(CommonConstants.THOUSANDTH_940)
    .height(32)
  }
}

@Component
export default struct ItemList {
  build() {
    Tabs() {
      TabContent() {//实物列表
        List({ space: CommonConstants.SPACE_10 }) {
          ForEach([1,2],(item)=> {
            ListItem(){
              Row({ space: CommonConstants.SPACE_6 }) {
                Image($r('app.media.toast')).width(50)
                Column({ space: CommonConstants.SPACE_4 }) {
                  Text('全麦吐司').fontWeight(CommonConstants.FONT_WEIGHT_500)
                  Text(`1片`).fontSize(14).fontColor($r('app.color.light_gray'))
                }
                Blank()
               Image($r('app.media.ic_public_add_norm_filled'))
                 .width(18)
                 .fillColor($r('app.color.primary_color'))
              }
              .width('100%')
              .padding(CommonConstants.SPACE_6)
            }
          })
        }
        .width('100%')
        .height('100%')

      }
      .tabBar('全部')//


    }
    .width(CommonConstants.THOUSANDTH_940)
    .height('100%')
  }
}

优化代码：

将重复的抽出成组件，使用

@Component
export default struct ItemList {
  build() {
    Tabs() {
      TabContent() {//实物列表
this.TabContentBuilder()
      }
      .tabBar('全部')//

      TabContent() {//实物列表
        this.TabContentBuilder()
      }
      .tabBar('主食')//

      TabContent() {//实物列表
        this.TabContentBuilder()
      }
      .tabBar('肉蛋奶')//
    }
    .width(CommonConstants.THOUSANDTH_940)
    .height('100%')
  }
  //封装抽取成组件
  @Builder TabContentBuilder() {
    List({ space: CommonConstants.SPACE_10 }) {
      ForEach([1,2],(item)=> {
        ListItem(){
          Row({ space: CommonConstants.SPACE_6 }) {
            Image($r('app.media.toast')).width(50)
            Column({ space: CommonConstants.SPACE_4 }) {
              Text('全麦吐司').fontWeight(CommonConstants.FONT_WEIGHT_500)
              Text(`91千卡/片`).fontSize(14).fontColor($r('app.color.light_gray'))
            }
            Blank()
            Image($r('app.media.ic_public_add_norm_filled'))
              .width(18)
              .fillColor($r('app.color.primary_color'))
          }
          .width('100%')
          .padding(CommonConstants.SPACE_6)
        }
      })
    }
    .width('100%')
    .height('100%')
  }

}