鸿蒙实战案列-食物列表页

---

前言

   食物列表的页面，这个页面当用户去点击某一个实物时，会弹出一个面板，在这个面板里展示食物的详细的信息，包括热量，碳水，脂肪等等，然后用户还可以去选择想要去添加的数量，点击提交就可以完成一个饮食记录的添加。

---

一、页面设计

        整个列表页是一个从上到下的一个列式布局，所以可以使用column容器，同样整个容器会占满整个屏幕，所以宽高都是100%。然后这里边第一行是一个导航条，那这一行的内容分为两部分，左侧是一个返回按钮，右侧是一个文本。然后再往下是第二部分，第二部分是食物的列表，这里是个tap组件，点击以后切换到对应的食物列表，而食物列表是一个list组件。

二、相关代码

代码如下：

import { CommonConstants } from '../../common/constants/CommonConstants'
@Component
export default struct ItemList {

  showPanel:()=>void

  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,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)
        }
        .onClick(()=>this.showPanel())
      })
    }
    .width('100%')
    .height('100%')
  }
}

三、效果图

---

总结

List组件是用于展示列表数据的重要组件。它通常用于在界面上展示多个相同类型的数据项。

ForEach组件是一种常用的循环迭代组件，通常用于遍历数组或列表中的每一个元素，并执行相应的操作。

TabBar 用于选择不同标签页，而TabContent 则用来显示相应的内容区域。用户通过点击不同的 TabBar，可以切换展示不同的 TabContent 内容。