食物列表数字键盘

上篇文章我们已经完成了底部Panel的大部分内容，还剩下一个数字键盘和保存取消按钮，那我们本篇文章来看看怎么个事

一、分析布局

布局没啥说的，直接上图吧

二、关键技术

Grid

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

看看，想什么来什么，我们刚好就需要一个网格布局的数字键盘，它就刚好有Grid

我们来看一下它的API文档

属性是嘎嘎多，有想了解的同学可以自己去看看API文档（具体查看API文档的方式有好几种，可以选择在文件中直接输入Grid，然后鼠标悬停在上方，直接点击查看API就好）

三、正式开发

1.数字键盘

话不多说还是新建组件

由于这部分我注释写的比较全就不过多解释了

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

不要忘记在列表首页去传参

NumberKeyboard({amount: $amount, value: $value})

按理来说我们改变了数量后，食物信息也会随之改变，所以我们在列表卡片中直接乘上数量即可

Text((value*this.amount).toFixed(1)).fontSize(18).fontWeight(CommonConstants.FONT_WEIGHT_700)

2.按钮

提交和取消按钮

直接在列表主页下新建组件，目前的提交的点击事件我们先将它设置为关闭页面，后面的文章会实现数据持久化

  @Builder PanelButton(){
    Row({space: CommonConstants.SPACE_6}){
      Button('取消')
        .panelButtonStyle()
        .backgroundColor($r('app.color.light_gray'))
        .onClick(() => this.showPanel = false)
      Button('提交')
        .panelButtonStyle()
        .backgroundColor($r('app.color.primary_color'))
        .onClick(() => this.showPanel = false)
    }
    .margin({top: 10})
  }

四、最终效果

好的可以看到最终效果和我们预期的简直一模一样（真不是用的同一张图片），虽然我们只是完成 了基本的样式，实际功能上还有不少的地方需要去改进

  OK，我们下篇文章接着讲，我们这里附上黑马程序员数字键盘的视频链接，文章配合视频更好理解哦。