食物列表-底部Panel

本页面实现通过点击任意食物，出现可以显示详细信息面板。

首先生成面板，使用@State showPanel ，并且通过onPanelShow 控制面板，定义无参函数：

 showPanel:()=> void//定义无参函数

 @State showPanel:boolean = false

  onPanelShow(){//控制面板
    this.showPanel = true
  }

底部面板的具体实现：

//3.底部面板
        Panel(this.showPanel){
          Button('关闭').onClick(()=> this.showPanel=false)
        }
        .mode(PanelMode.Full)//展示部分
        .dragBar(false)//高度
        .backgroundMask($r('app.color.light_gray'))//蒙版颜色
        .backgroundColor(Color.White)

打开面板的实现：

.onClick(()=> this.showPanel)//点击打开面板

在ItemPanelHeader中，这部分作为面板最头部，以文字和图片的形式展现：

export default struct ItemPanelHeader {
  build() {
    Row(){
      Text('2024年1月25日  早餐')
        .fontSize(18).fontWeight(CommonConstants.FONT_WEIGHT_600)
      Image($r('app.media.ic_public_spinner'))
        .width(20)
        .fillColor(Color.Black)
    }
  }
}

在ItenCard中详细实现具体内容部分：其中定义了状态变量 amount ,它是用户随机改变的

export default struct ItemCard {

  @Prop amount:number//状态变量，随时改变

  build() {
    Column({space:CommonConstants.SPACE_8}) {
      //1.图片信息
      Image($r('app.media.toast')).width(150)
      //2.名称信息
      Row() {
        Text('全麦吐司').fontWeight(CommonConstants.FONT_WEIGHT_700)
      }
      .backgroundColor($r('app.color.lightest_primary_color'))
      .padding({ top: 5, bottom: 5, left: 12, right: 12 })
      Divider().width(CommonConstants.THOUSANDTH_940).opacity(0.6)
      //3.营养素信息
      Row({space:CommonConstants.SPACE_8}){
        this.NutruentInfo('热量（千卡）',91.0)
        this.NutruentInfo('碳水（克）',15.5)
        this.NutruentInfo('蛋白质（克）',4.4)
        this.NutruentInfo('脂肪（克）',1.3)
      }
      Divider().width(CommonConstants.THOUSANDTH_940).opacity(0.6)
      //4.数量信息
      Row(){
        Column({space:CommonConstants.SPACE_4}){
          Text(this.amount.toFixed(1)).fontSize(50).fontColor($r('app.color.primary_color'))
            .fontWeight(CommonConstants.FONT_WEIGHT_600)
          Divider().color($r('app.color.primary_color'))
        }
        .width(150)
        Text('片')
          .fontColor($r('app.color.light_gray'))
          .fontWeight(CommonConstants.FONT_WEIGHT_600)
      }
    }
  }

  @Builder NutruentInfo(label:string,value:number){
    Column({space:CommonConstants.SPACE_8}){
      Text(label).fontSize(14).fontColor($r('app.color.light_gray'))
      Text(value.toFixed(1)).fontSize(18).fontWeight(CommonConstants.FONT_WEIGHT_700)
    }
  }
}

在调用时发现面板显示不出来，于是需要在ItenList 中添加 layoutWeight ，通过设置列表，其余用来显示面板则则可以实现：

//2.列表
        ItemList({showPanel:this.onPanelShow.bind(this) })
        .layoutWeight(1)//
        //3.底部面板
        Panel(this.showPanel){
          //3.1顶部日期
          ItemPanelHeader()
          //3.2记录项卡片
          ItemCard({amount:this.amount})

最终：