鸿蒙开发———黑马健康app（数字键盘）_鸿蒙开发的parsefloat

使用 Grid 组件创建网格布局，用于展示数字键盘的按钮。用 ForEach 遍历 numbers 数组，并为每个数字创建 GridItem 和 Text 组件作为按钮。为删除操作创建一个特别的 GridItem，显示“删除”文字。为每个数字按钮和删除按钮添加 onClick 事件处理器，用 clickNumber 和 clickDelete 方法。clickNumber 方法处理数字按钮的点击事件，将点击的数字添加到当前值，并进行格式校验和数值更新。clickDelete 方法处理删除按钮的点击事件，从当前值中移除最后一个字符，并更新数值。parseFloat 方法用于将字符串转换为浮点数，去除字符串末尾的小数点。在 clickNumber 中，检查输入的字符串是否符合预期的数值格式，确保不会输入超过两个小数点的数字如果输入的数值超过 999.9，将其限制在 999.0

 
import { CommonConstants } from '../../common/constants/CommonConstants'
 
 
@Component
export default struct NumberKeyboard {
 
  // numbers 数组包含数字键盘上的所有字符，包括数字 0-9 和一个小数点。
  numbers: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '.']
 
 
  @Link amount: number
 
 
  @Link value: string
 
  // keyBoxStyle 方法定义了数字键盘按钮的样式。
  @Styles keyBoxStyle(){
    .backgroundColor(Color.White)  // 设置按钮背景颜色为白色。
    .borderRadius(8)  // 设置按钮圆角为 8。
    .height(60)  // 设置按钮高度为 60。
  }
 
  // build 方法用于构建数字键盘的 UI 布局。
  build() {
    // 使用 Grid 组件创建网格布局。
    Grid(){
      // 使用 ForEach 遍历 numbers 数组，为每个数字创建一个 GridItem。
      ForEach(this.numbers, num => {
        GridItem(){
          // 在每个 GridItem 中创建一个显示数字的 Text 组件。
          Text(num).fontSize(20).fontWeight(CommonConstants.FONT_WEIGHT_900)
        }
        // 应用键盘按钮样式。
        .keyBoxStyle()
        // 为数字按钮添加点击事件。
        .onClick(() => this.clickNumber(num))
      })
      // 为删除按钮创建一个 GridItem。
      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 方法处理数字按钮的点击事件。
  clickNumber(num: string){
    // 拼接用户输入的内容。
    let val = this.value + num
    // 校验输入格式是否正确，确保不超过一个点且点不在字符串末尾。
    let firstIndex = val.indexOf('.')
    let lastIndex = val.lastIndexOf('.')
    if(firstIndex !== lastIndex || (lastIndex != -1 && lastIndex < val.length - 2)){
      // 如果输入非法，则不进行操作。
      return
    }
    // 将字符串转换为数值。
    let amount = this.parseFloat(val)
    // 如果数值大于等于 999.9，则设置为 999.0。
    if(amount >= 999.9){
      this.amount = 999.0
      this.value = '999'
    }else{
      // 否则，更新数值和字符串值。
      this.amount = amount
      this.value = val
    }
  }
 
  // clickDelete 方法处理删除按钮的点击事件。
  clickDelete(){
    // 如果当前没有输入内容，则清空 value 和 amount。
    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 方法尝试将字符串转换为浮点数。
  parseFloat(str: string){
    // 如果字符串为空，则返回 0。
    if(!str){
      return 0
    }
    // 如果字符串以点结尾，则去掉点。
    if(str.endsWith('.')){
      str = str.substring(0, str.length - 1)
    }
    // 使用 JavaScript 内置的 parseFloat 函数进行转换并返回结果。
    return parseFloat(str)
  }
}