7. 食物列表——底部Panel

7.1 UI设计

7.2 Panel面板实现

在食物列表页面点击添加，面板会弹出来，因为在listItem页面要控制父组件所以定义一个showPanel方法

 showPanel:()=>void
//控制父组件
.onClick(()=>this.showPanel())

在ItemIndex页面需要定义showPanel状态变量来控制面板是否出现boolean类型的状态变量然后用到Panel组件需要对它的一些属性进行修改

 @State showPanel:boolean=false

7.3 Panel面板内容实现

7.3.1 顶部日期(还没有实现弹窗)

    Row(){
      Text('6月16号 早餐')
        .fontSize(18)
        .fontWeight(CommonConstants.FONT_WEIGHT_600)
        Image($r('app.media.ic_public_spinner'))
          .width(20)
          .fillColor(Color.Black)

    }

7.3.2 顶部日期运行效果

7.3.3 记录项卡片

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 })

3.营养素

定义一个组件用来传不同类型的占比数量和名称

toFixed(1)是用来保证只有一位小数

@Builder NutrientInfo(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)
    }
  }

 Divider().width(CommonConstants.THOUSANDTH_940)
         .opacity(0.6) //透明度
       //3.营养素
       Row({ space: CommonConstants.SPACE_8 }) {
         this.NutrientInfo('热量(千卡)', 91.0)
         this.NutrientInfo('碳水(克)', 15.5)
         this.NutrientInfo('蛋白质(克)', 4.4)
         this.NutrientInfo('脂肪(克)', 1.3)
       }

       Divider().width(CommonConstants.THOUSANDTH_940)
         .opacity(0.6) //透明度

4.数量

  @Prop amount:number//状态变量
  //数量不是一个死的值，这个组件只渲染，改变是在键盘组件里

 Row({space:CommonConstants.SPACE_12}) {
         Column({ space: CommonConstants.SPACE_4 }) {
           //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)
       }

7.3.4 记录项卡片运行效果

7.4 遇到问题 

出现问题点击添加以后并没有出现面板

panel要求所在的容器是固定的然而ItemList的高度不固定所以Panel无法展示

给ItemList加上layoutWeight（1）

7.5 Panel组件介绍

接口

Panel(show: boolean)

参数：

参数名	参数类型	必填	参数描述
show	boolean	是	控制Panel显示或隐藏。 说明： 如果设置为false时，则不占位隐藏。Visible.None或者show之间有一个生效时，都会生效不占位隐藏。

属性

名称	参数类型	描述
type	PanelType	设置可滑动面板的类型。 默认值：PanelType.Foldable
mode	PanelMode	设置可滑动面板的初始状态。 Minibar类型默认值：PanelMode.Mini；其余类型默认值：PanelMode.Half 从API version 10开始，该属性支持$$双向绑定变量。
dragBar	boolean	设置是否存在dragbar，true表示存在，false表示不存在。 默认值：true
fullHeight	string | number	指定PanelMode.Full状态下的高度。 默认值：当前组件主轴大小减去8vp空白区 说明： 不支持设置百分比。
halfHeight	string | number	指定PanelMode.Half状态下的高度。 默认值：当前组件主轴大小的一半。 说明： 不支持设置百分比。
miniHeight	string | number	指定PanelMode.Mini状态下的高度。 默认值：48 单位：vp 说明： 不支持设置百分比。
show	boolean	当滑动面板弹出时调用。 默认值：true
backgroundMask9+	ResourColor	指定Panel的背景蒙层。 默认值：'#08182431'

PanelType枚举说明

名称	描述
Minibar	提供minibar和类全屏展示切换效果。
Foldable	内容永久展示类，提供大（类全屏）、中（类半屏）、小三种尺寸展示切换效果。
Temporary	内容临时展示区，提供大（类全屏）、中（类半屏）两种尺寸展示切换效果。
CUSTOM10+	配置自适应内容高度，不支持尺寸切换效果。

PanelMode枚举说明

名称	描述
Mini	类型为minibar和foldable时，为最小状态；类型为temporary，则不生效。
Half	类型为foldable和temporary时，为类半屏状态；类型为minibar，则不生效。
Full	类全屏状态。