45、鸿蒙/组件/数字计数器

InputNumber 计数器仅允许输入标准的数字值：
思路：使用行布局(Row)，左边按钮(Button)，中间输入框(TextInput)，右边按钮(Button)，监听按钮点击事件，减少按钮到0时不在运算，中间输入框设置为只能输入数字（InputType.Number），代码和效果如下：

效果

InputNumber.png

代码

@Component
export struct InputNumber {
  //
  @State numVal: number = 0;
  build() {

    Row(){
      Button('-').onClick((event: ClickEvent) => {
        if(this.numVal <=0){
          return;
        }
        this.numVal--
      }).width(50)
      TextInput({
        text: this.numVal.toString()
      }).width(150).textAlign(TextAlign.Center).type(InputType.Number).onChange(e=>{
        if(Number(e)){
          this.numVal = Number(e);
        }
      })
      Button('+').onClick((event: ClickEvent) => {
        this.numVal++
      }).width(50)
    }.padding(20)
  }
}