食物列表页

食物列表页

如图所示，本节继续完善饮食记录页面的功能，点击早餐等标签会跳转到食物列表页，为早餐等挑选食物或为运动标签挑选运动。效果如下：

分析结构+实现

首先，该页面是一个独立的页面，所以是新增一页，而不是新增一个组件。根据效果图，可以将该页分为头部导航和食物列表两部分。

头部列表是由一个返回图标和标签组成，代码实现如下：

1.Header部分

 @Builder Header(){
    Row(){
      //返回图标
      Image($r('app.media.ic_public_back'))
        .width(30)
        .onClick(()=>router.back())
      Blank();
      //标题
      Text('早餐').fontSize(18).fontWeight(CommonConstants.FONT_WEIGHT_600)
    }.width(CommonConstants.THOUSANDTH_940)
     .height(32)
  }

可以看出，为返回图标添加了点击事件，点击返回上一页。

2.食物列表

根据效果图，可以看出，食物列表与本应用主页同样使用了Tabs组件，其中TabContent()中是食物列表或运动列表，以食物列表为例，将食物列表封装。

@Builder TabContentBuilder(){
  List({space:CommonConstants.SPACE_10}){
    ForEach([1,2,,3,4,5,6],(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%')
}

3.在食物列表主页调用

build() {
  Column() {
    //1.头部导航
 this.Header();

    //2.列表
    ItemList()
  }
  .width('100%')
  .height('100%')
}

4.完成后效果