黑马健康项目（七）食物列表页

食物列表页

一准备阶段：

我们这部分要完成的内容是通过食物记录列表的加号跳转到的另一个页面，食物列表页面

这一页面就是两部分一个顶部的导航条和下面的一个tabs组件

导航条的内容就是一个Row容器里一个左端的返回image和右面的text

tabs组件里是上部的导航栏tabBar和下面的TabContent

这是前期的准备构思

二代码实现：

因为这是一个新的页面，所以我们要重新建一个ItemIndex的页面

build() {
    Column() {
      // 1.头部导航
      this.Header()
      // 2.列表
      ItemList()
        .layoutWeight(1)
   
    }
    .width('100%')
    .height('100%')
  }

首先是一个头部导航，那我们就建一个Header的组件

 @Builder Header() {
    Row() {
      Image($r('app.media.ic_public_back'))
        .width(24)
        .onClick(() => router.back())
      Blank()
      Text(this.type.name).fontSize(18).fontWeight(CommonConstants.FONT_WEIGHT_600)
    }
    .width(CommonConstants.THOUSANDTH_940)
    .height(32)
  }
}

.onClick(() => router.back()) 通过点击Image可以返回上一页面

然后是列表

列表这一部分和之间record一样我们要新建一个item的文件夹用来存放item有关的组件

写一个ItemList：

@Component
export default struct ItemList {
  

  build() {
    Tabs() {
      TabContent() {
        this.TabContentBuilder(ItemModel.list(this.isFood))
      }
      .tabBar('全部')

     
    }
    .width(CommonConstants.THOUSANDTH_940)
    .height('100%')
    .barMode(BarMode.Scrollable)
  }
 
 

因为列表内每一页面的内容都是类似的所以我们把列表内容用一个Builder来封装

@Builder TabContentBuilder(items: RecordItem[]) {
  List({ space: CommonConstants.SPACE_10 }) {
    ForEach(items, (item: RecordItem) => {
      ListItem() {
        Row({ space: CommonConstants.SPACE_6 }) {
          Image(item.image).width(50)
          Column({ space: CommonConstants.SPACE_4 }) {
            Text(item.name).fontWeight(CommonConstants.FONT_WEIGHT_500)
            Text(`${item.calorie}千卡/${item.unit}`).fontSize(14).fontColor($r('app.color.light_gray'))
          }.alignItems(HorizontalAlign.Start)

          Blank()
          Image($r('app.media.ic_public_add_norm_filled'))
            .width(18)
            .fillColor($r('app.color.primary_color'))
        }
        .width('100%')
        .padding(CommonConstants.SPACE_6)
      }
      .onClick(() => this.showPanel(item))
    })
  }
  .width('100%')
  .height('100%')
}

这样就可以简化代码