黑马健康-食物列表-底部Panel和数字键盘

 一，前言

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

二、两部分的运行代码

第一部分：

底部Panel代码：

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

第二部分：

数字键盘代码：

import { CommonConstants } from '../../common/constants/CommonConstants'
@Component
export default struct NumberKeyboard {

  numbers: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '.']
  @Link amount: number
  @Link value: string


  @Styles keyBoxStyle(){
    .backgroundColor(Color.White)
    .borderRadius(8)
    .height(60)
  }
  build() {
    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())
    }
    .width('100%')
    .height(280)
    .backgroundColor($r('app.color.index_page_background'))
    .columnsTemplate('1fr 1fr 1fr')
    .columnsGap(8)
    .rowsGap(8)
    .padding(8)
    .margin({top: 10})
  }

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

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

  parseFloat(str: string){
    if(!str){
      return 0
    }
    if(str.endsWith('.')){
      str = str.substring(0, str.length - 1)
    }
    return parseFloat(str)
  }
}

三、运行截图

底部Panel截图：

数字键盘截图：

四、总结

第一部分：

导入：
从 '../../common/constants/CommonConstants' 路径导入了 CommonConstants，这通常包含一些全局的、可复用的常量。
组件装饰器：
使用 @Component 装饰器来标记这是一个组件。然而，这不是标准的 Vue 语法，它可能是其他 UI 框架或库（如 Weex、Flutter 等）的语法。
组件结构：
定义了一个名为 ItemPanelHeader 的组件。
该组件有一个 build 方法，用于构建和返回组件的 UI 结构。
UI 构建：
使用 Row() 函数（可能是某个 UI 框架或库提供的）来创建一个水平排列的子元素容器。
在 Row() 中，有两个子元素：
一个 Text 组件，显示文本 '2024年1月25日 早餐'。该文本使用了 fontSize(18) 来设置字体大小为 18，并使用 fontWeight(CommonConstants.FONT_WEIGHT_600) 来设置字体粗细，其中 FONT_WEIGHT_600 是从 CommonConstants 导入的一个常量。
一个 Image 组件，显示一个图片，其资源 ID 为 $r('app.media.ic_public_spinner')（这看起来像是一个资源引用）。该图片设置了宽度为 20，并使用 fillColor(Color.Black) 设置了填充颜色为黑色（尽管对于图片来说，这个填充颜色可能不会生效，除非它是某种特殊类型的图片或容器）。

第二部分：

导入与组件定义:
从 '../../common/constants/CommonConstants' 导入了一个名为 CommonConstants 的常量集合。
使用 @Component 装饰器标记该结构为一个组件。
export default struct NumberKeyboard 定义了 NumberKeyboard 组件。
数据与状态:
numbers: 一个包含数字键（包括小数点）的字符串数组。
@Link amount: number: 与外部数据双向绑定的数字值（可能用于存储转换后的浮点数）。
@Link value: string: 与外部数据双向绑定的字符串值（可能用于存储用户输入的原始字符串）。
样式定义
keyBoxStyle: 定义了一个样式对象，用于设置键盘上每个按键的背景颜色、边框半径和高度。
UI 构建:
使用 Grid 布局来组织键盘上的数字键和删除键。
ForEach 遍历 numbers 数组，为每个数字创建一个 GridItem，并绑定点击事件 clickNumber。
为“删除”按钮创建一个 GridItem，并绑定点击事件 clickDelete。
使用 .keyBoxStyle() 应用前面定义的样式到每个按键上。
设置整个键盘的宽度、高度、背景颜色、列模板、列间隙、行间隙、内边距和外边距。
交互逻辑:
clickNumber(num: string): 处理用户点击数字键的逻辑。
拼接用户输入的内容。
校验输入格式是否正确（确保小数点只出现一次，且不是字符串的最后一位）。
如果输入合法，将字符串转换为浮点数并保存。
如果浮点数大于或等于 999.9，则将 amount 设置为 999.0，并将 value 设置为 '999'。
clickDelete(): 处理用户点击删除键的逻辑。
如果 value 已经是空字符串，则不做任何操作。
否则，删除 value 的最后一个字符，并更新 amount。
parseFloat(str: string): 一个辅助函数，用于将字符串转换为浮点数，并处理可能以小数点结尾的字符串。