黑马健康App（五）

系列文章目录

第一章 黑马健康APP
第二章 黑马健康APP
第三章 黑马健康APP
第四章 黑马健康APP
第五章 黑马健康APP

---

第五章 黑马健康APP

前言

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

---

一、底部panel

这个栏目用于添加食物或运动信息，用于展示记录，该栏目的实现使用了一个叫panel的组件，该组件是可滑动面板，组件在使用时需要传入一个show值，该值为boolean型数据，值为false时面板不显示，值为true时面板显示

onPanelShow(item: RecordItem) {
    this.amount = 1
    this.value = ''
    this.item = item
    this.showPanel = true
  }

整个面板主要分成四大部分，分别是最上面的顶部日期、中间的记录项卡片、数字键盘和最后的按钮

顶部日期

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

记录项卡片

这里的记录项卡片包括食物图片、名称、所含营养素以及吃掉的食物数量，其中在食物名称和营养素模块中出现了一个新组建Divider()组件，该组件是用来添加下划线的，通过设置不同属性达到不同的样式

数字键盘

使用grid组件创建一个网格布局，打造输入法，每个数字都是一个GridItem，通过给GridItem添加点击事件来实现数字输入效果，最后使用一个forEach组件将功能相同的数字组件循环渲染出来

Grid(){
      ForEach(this.numbers, num => {
        GridItem(){
          Text(num).fontSize(20).fontWeight(CommonConstants.FONT_WEIGHT_900)
        }
        .keyBoxStyle()
        .onClick(() => this.clickNumber(num))
      })
      GridItem(){
        Text('删除').fontSize(20).fontWeight(CommonConstants.FONT_WEIGHT_900)
      }
      .keyBoxStyle()
      .onClick(() => this.clickDelete())
    }

二.数字键盘的具体功能

1.数值按键

为键盘中的数字按键添加点击事件，将用户输入的数据与原数据进行拼接，然后判断输入的格式是否正确，如果输入正确则将其转换为数值，然后保存到amount变量中

clickNumber(num: string){
    // 1.拼接用户输入的内容
    let val = this.value + num
    // 2.校验输入格式是否正确
    let firstIndex = val.indexOf('.')
    let lastIndex = val.lastIndexOf('.')
    if(firstIndex !== lastIndex || (lastIndex != -1 && lastIndex < val.length - 2)){
      // 非法输入
      return
    }
    // 3.将字符串转为数值
    let amount = this.parseFloat(val)
    // 4.保存
    if(amount >= 999.9){
      this.amount = 999.0
      this.value = '999'
    }else{
      this.amount = amount
      this.value = val
    }
  }

2.删除按键

为键盘中的删除按键添加点击事件

clickDelete(){
    if(this.value.length <= 0){
      this.value = ''
      this.amount = 0
      return
    }
    this.value = this.value.substring(0, this.value.length - 1)
    this.amount = this.parseFloat(this.value)
  }

---

总结

以上就是今天要写的内容，本文简单介绍了该app的panel的小功能，让我们期待后续的功能的开发