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