实战案例-食物列表-底部Panel（源于黑马程序员）

分析panel页面，整体是一个列布局（column容器），包括顶部日期（一个行布局（row容器）：text文本和image下三角图片）和记录项卡片（column容器）中的食物图片（image），食物名称（text），食物热量介绍（row容器中有四个column容器，text文本），吃了多少（row容器中有一个column容器（text文本和下划线）和一个text文本），一个自定义数字键盘（gird）和最下面的两个按钮（row容器，两个button）。

 ItemIndex页面：

import router from '@ohos.router'
import { CommonConstants } from '../common/constants/CommonConstants'
import ItemCard from '../view/Item/ItemCard'
import ItemList from '../view/Item/ItemList'
import ItemPanelHeader from '../view/Item/ItemPanelHeader'
@Entry
@Component
struct ItemIndex {
  @State amount:number=1//定义状态变量
  @State showPanel:boolean = false//状态变量，是否展示Panel

  onPanelShow(){//当panel展示时触发
    this.showPanel=true
  }

  build() {
    Column() {
      //1.头部导航
      this.Header()
      //2.列表
      ItemList({showPanel:this.onPanelShow.bind(this)})//点击时触发此函数
      .layoutWeight(1)//固定高度
      //3.底部面板
      Panel(this.showPanel){
        /*Button('关闭')
          .onClick(()=>this.showPanel=false)*/
        //3.1 顶部日期
        ItemPanelHeader()
        //3.2 记录项卡片
        ItemCard({amount:this.amount})
        //3.3 数字键盘

        //3.4 按钮
      }
      .mode(PanelMode.Full)//默认展示全部
      .dragBar(false)
      .backgroundMask($r('app.color.light_gray'))//
      .backgroundColor(Color.White)//本身的背景颜色
    }
    .height('100%')
    .height('100%')
  }

  @Builder Header(){//顶部导航
    Row(){//行布局
      Image($r('app.media.ic_public_back'))
        .width(24)
        .onClick(()=>router.back())//点击后返回上个页面
      Blank()
      Text('早餐')//显示点击的记录分组名称
        .fontSize(18)
        .fontWeight(CommonConstants.FONT_WEIGHT_600)
    }
    .width(CommonConstants.THOUSANDTH_940)
    .height(32)
  }

}

ItemList页面：声明showPanel函数，当点击食物项时调用此函数。

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组件封装到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())//调用showPanel函数
      })
    }
    .width('100%')
    .height('100%')
  }
}

ItemPanelHeader页面：panel页面的顶部日期。

import { CommonConstants } from '../../common/constants/CommonConstants'
@Component
export default struct ItemPanelHeader {//顶部日期
  build() {
    Row(){//行式布局
      Text('2024年1月25号 早餐')
        .fontWeight(18)
        .fontWeight(CommonConstants.FONT_WEIGHT_600)
      Image($r('app.media.ic_public_spinner'))
        .width(20)
        .fillColor(Color.Black)
    }
    //.width(CommonConstants.THOUSANDTH_940)//删除使文字默认居中
  }
}

ItemCard页面：panel页面的记录项卡片。

import { CommonConstants } from '../../common/constants/CommonConstants'
@Component
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.NutrientInfo('热量（千卡',91.0)
        this.NutrientInfo('碳水（克）',15.5)
        this.NutrientInfo('蛋白质（克）',4.4)
        this.NutrientInfo('脂肪（克）',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 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)
    }
  }
}

运行结果：点击食物列表页中食物项时，会在底部弹出此面板。