健康应用5

数字键盘组件

1. 组件定义：

   • NumberKeyboard：使用@Component标记的结构体，表示数字键盘组件。

2. 组件属性：

   • numbers：包含数字键盘上所有可显示的数字和一个小数点的数组。
   • amount：与外部链接的数值属性，表示当前输入的数值。
   • value：与外部链接的字符串属性，表示当前输入的数值字符串。

3. 样式定义：

   • keyBoxStyle：定义键盘按钮的样式，包括背景颜色、圆角和高度。

4. UI构建：

   • 使用Grid布局构建数字键盘，设置宽度为100%，高度为280，背景颜色等。
   • ForEach遍历numbers数组，为每个数字创建一个GridItem。
   • 为删除操作创建一个单独的GridItem。

5. 按钮点击事件处理：

   • clickNumber(num)：点击数字时的事件处理，包括：
     • 拼接输入内容。
     • 校验输入格式（如小数点数量）。
     • 将字符串转换为数值，并根据需要进行截断（不超过999）。
     • 更新amount和value属性。
   • clickDelete()：点击删除按钮时的事件处理，包括：
     • 检查字符串长度，避免删除空字符串。
     • 删除当前输入的最后一个字符，并更新数值。

6. 数值处理：

   • parseFloat(str)：自定义的解析浮点数的方法，包括去除字符串末尾的小数点，并使用parseFloat转换为数值。

这个组件的主要功能是提供一个数字输入界面，允许用户通过点击数字和删除按钮输入数值。输入的数值可以通过链接的属性与外部组件共享。同时，组件还包括了输入格式的校验和数值转换的功能。

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.clickDelte())
    }
    .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){
      this.amount=999.0
      this.value='999'
    }
    else{
      this.amount=amount
      this.value=val
    }
  }
  clickDelte(){
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)
  }
}