鸿蒙开发日志黑马健康（4）

一、项目目标

综合运用本学期所学内容及个人自学知识，使用HarmonyOS 4.0及以上版本开发一款具有实用性和创新  性的移动应用软件。

二、项目介绍

黑马健康是一款功能全面的健康管理应用，它通过提供个性化的饮食记录、健康评估等功能，帮助用户轻松管理健康，改善饮食和生活习惯。无论是需要减肥塑形，还是关注日常营养摄入，黑马健康都能为用户提供定制化的服务，让健康管理变得简单而有效。

三、实验步骤

食物列表—底部Panel

底部弹窗

底部弹窗的头部设计

中间列表设计

四、遇到的问题及解决方案

 1.滑动面板如何实现

使用Panel组件，需要给每个List项设置点击事件，如何控制父组件弹出，定义showPanel函数来控制，父组件调用函数时，覆盖

2.底部面板不显示

build() 
{ Column() 
{ // 1.头部导航
 this.Header() // 
2.列表 ItemList({showPanel:this.onPanelShow.bind(this)})
 //3.底部面板 
Panel(this.showPanel) Button('关闭')
.onClick(() => this.showPanel = false) } 
.width('100%')
 .height('100%') }

使用.layoutWeight(1)除了头部导航，其余全是列表，这样Panel高度固定，底部面板渲染

3.数字键盘如何让实现

附代码

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'
import NumberKeyboard from '../view/item/NumberKeyboard'
@Entry
@Component
struct ItemIndex {
  @State message:String = 'Hello World'
  @State showPanel:boolean = false
  @State amount: number = 1

  onPanelShow(){
    this.showPanel = true
  }
  build() {
    Column() {
      // 1.头部导航
      this.Header()
      // 2.列表
      ItemList({ showPanel: this.onPanelShow.bind(this) })
        .layoutWeight(1)
      //3.底部面板
      Panel(this.showPanel) {
       //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)
    }
    .width('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)
  }
}

ItemCard

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

ItemList

import { CommonConstants } from '../../common/constants/CommonConstants'


@Component
export default struct ItemList {

  showPanel: () => void
  build() {
    Tabs() {
      TabContent() {
       this.TabsContentBuilder()
      }
.tabBar('全部')
      TabContent() {
        this.TabsContentBuilder()
      }
      .tabBar('主食')
      TabContent() {
        this.TabsContentBuilder()
      }
      .tabBar('肉蛋奶')
    }

   .width(CommonConstants.THOUSANDTH_940)
  .height('100%')
}
  @Builder TabsContentBuilder(){
    List() {
      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).fontSize($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%')
  }
}

ItemPanel

import { CommonConstants } from '../../common/constants/CommonConstants'
@Component
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)
    }
  }
}