鸿蒙案例-食物列表页和底部Panel的实现

前言

    食物列表页是健康和饮食管理应用中的一个关键功能，它允许用户浏览、搜索和选择不同的食物项来记录他们的饮食习惯。食物列表以列表形式展示食物名称、图片和简要信息。点击食物项后，展示详细的营养信息，包括热量、脂肪、碳水化合物、蛋白质等。

    食物列表页是用户与饮食管理应用交互的主要入口之一，它的设计和功能对于提供流畅的用户体验至关重要。通过这些功能，用户可以轻松地记录和分析他们的饮食习惯，从而更好地管理自己的健康和营养摄入。

---

列表UI设计

实现过程

1.ItemIndex组件

1.头部导航：首先是一个返回图片，设置好返回图片的宽，然后设置back实现点击返回的效果。空格处用Blank组件。

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

2.列表：因为列表内容过多，所以需创建Item组件目录，在创建ItemList组件，并进行调用

 ItemList({showPanel:this.onPanelShow.bind(this)})
      .layoutWeight(1)

3.底部面板：使用了Panel可滑动面板，提供一种轻量的内容展示窗口，方便在不同尺寸中进行切换。设置时展示全部，设置成不可调整高度

 Panel(this.showPanel){
}.mode(PanelMode.Full)
      .dragBar(false)  
      .backgroundMask($r('app.color.light_gray')) 
      .backgroundColor(Color.White)

3.1.顶部日期：创建ItemPanelHeader组件并进行调用

 ItemPanelHeader()

3.2.记录项卡片：创建ItemCard组件并进行调用

ItemCard({amount:this.amount})

2.ItemList组件

1.利用Tabs容器创建多个项

 Tabs(){
      TabContent(){
        this.TabContentBuilder()
      }
      .tabBar('全部')

      TabContent(){
        this.TabContentBuilder()
      }
      .tabBar('主食')

      TabContent(){
        this.TabContentBuilder()
      }
      .tabBar('果蔬')

      TabContent(){
        this.Tab