黑马健康APP实现-食物列表页

数字键盘

由于数字键盘部分比较复杂,把这部分封装到一个组件中完成。这部分要用到一个容器性的组件Grid（）。

Grid

网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。

接口

Grid(scroller?: Scroller)

Scroller是一个滚动条控制器，如果单元格太多，我们可以通过滚动查看。

属性

除支持通用属性外，还支持以下属性：

名称	参数类型	描述
columnsTemplate	string	设置当前网格布局列的数量，不设置时默认1列。 例如， '1fr 1fr 2fr' 是将父组件分3列，将父组件允许的宽分为4等份，第一列占1份，第二列占1份，第三列占2份。 说明： 设置为'0fr'时，该列的列宽为0，不显示GridItem。设置为其他非法值时，GridItem显示为固定1列。
rowsTemplate	string	设置当前网格布局行的数量，不设置时默认1行。 例如，'1fr 1fr 2fr'是将父组件分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。 说明： 设置为'0fr'，则这一行的行宽为0，这一行GridItem不显示。设置为其他非法值，按固定1行处理。
columnsGap	Length	设置列与列的间距。 默认值：0 说明： 设置为小于0的值时，按默认值显示。
rowsGap	Length	设置行与行的间距。 默认值：0 说明： 设置为小于0的值时，按默认值显示。
scrollBar	BarState	设置滚动条状态。 默认值：BarState.Off
scrollBarColor	string | number | Color	设置滚动条的颜色。
scrollBarWidth	string | number	设置滚动条的宽度。宽度设置后，滚动条正常状态和按压状态宽度均为滚动条的宽度值。 默认值：4 单位：vp
cachedCount	number	设置预加载的GridItem的数量，只在LazyForEach中生效。具体使用可参考减少应用白块说明。 默认值：1 说明： 设置缓存后会在Grid显示区域上下各缓存cachedCount*列数个GridItem。LazyForEach超出显示和缓存范围的GridItem会被释放。 设置为小于0的值时，按默认值显示。
editMode8+	boolean	设置Grid是否进入编辑模式，进入编辑模式可以拖拽Grid组件内部GridItem。 默认值：false
layoutDirection8+	GridDirection	设置布局的主轴方向。 默认值：GridDirection.Row
maxCount8+	number	当layoutDirection是Row/RowReverse时，表示可显示的最大列数 当layoutDirection是Column/ColumnReverse时，表示可显示的最大行数。 默认值：Infinity 说明： 当maxCount小于minCount时，maxCount和minCount都按默认值处理。 设置为小于0的值时，按默认值显示。
minCount8+	number	当layoutDirection是Row/RowReverse时，表示可显示的最小列数。 当layoutDirection是Column/ColumnReverse时，表示可显示的最小行数。 默认值：1 说明： 设置为小于0的值时，按默认值显示。
cellLength8+	number	当layoutDirection是Row/RowReverse时，表示一行的高度。 当layoutDirection是Column/ColumnReverse时，表示一列的宽度。 默认值：第一个元素的大小
multiSelectable8+	boolean	是否开启鼠标框选。 默认值：false - false：关闭框选。 - true：开启框选。
supportAnimation8+	boolean	是否支持动画。当前支持GridItem拖拽动画。 默认值：false

第一步，完成数字键盘的一个样式。

import { CommonConstants } from '../../common/constants/CommonConstants'
@Component
export default struct NumberKeyboard {
  number:string[] = ['1','2','3','4','5','6','7','8','9','0','.']

  @Styles keyBoxStyle(){
    .backgroundColor(Color.White)
    .height(60)
    .borderRadius(8)
  }

  build() {
    Grid(){
      ForEach(this.number,num=>{
        GridItem(){
          Text(num)
            .fontSize(20)
            .fontWeight(CommonConstants.FONT_WEIGHT_900)
        }
        .keyBoxStyle()
      })
      GridItem(){
        Text('删除')
          .fontSize(20)
          .fontWeight(CommonConstants.FONT_WEIGHT_900)
      }
      .keyBoxStyle()
    }
    .width('100%')
    .height(280)
    .backgroundColor($r('app.color.index_page_background'))
    .columnsTemplate('1fr 1fr 1fr')
    .columnsGap(8)//间距
    .rowsGap(8)
    .padding(8)
    .margin({top:10})
  }
}

第二步，将数字键盘与记录项卡片的数字联动。父组件中有一个定义好的amount值，在数字键盘组件传入amount变量，当点击键盘数字时改变amount值，从而在amount传入记录项卡片时达成键盘与卡片的数字联动。要注意，当用户多次点击数字，要将数字拼接在一起。若用户输入1.时，卡片上应该显示1，但是记录 . ，这样当用户再次输入数字如：5时，显示1.5而不是15。

  clickNumber(num:string){
    //拼接用户输入的内容
    let val = this.value + num
    //校验输入格式是否正确
    let firstIndex = val.indexOf('.')
    let lastIndex = val.indexOf('.')
    if(firstIndex!==lastIndex || (lastIndex != -1 && lastIndex<val.length-2)){
      return
    }
    //将字符串转为数值
    let amount = this.parseFloat(val)
    //保存
    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.endsWith('.')){
      //若字符串以小数点结尾
      str = str.substring(0,str.length - 1)
    }
    return parseFloat(str)
  }

运行测试后，出现了问题：全部删除后应该是0，而不是NAN。在转换数值的部分添加代码：

if (!str){
  return 0
}