当前位置：首页>鸿蒙APP>鸿蒙开发:一个简单的数字加减框组件

鸿蒙开发:一个简单的数字加减框组件

2026-01-19 02:20:00

一个服务于鸿蒙开发者的应用【鸿元极客】已经上架，欢迎大家去应用市场搜索下载体验。

前言

数字加减框组件常用于购物车等有数量加减的场景，本身实现起来并不难，无非就是横向的三个组件排列，左右是“+”、“-”两个操作按钮，中间是一个显示数值的输入框组件。

具体的业务逻辑也是非常的简单，当用户点击“+”按钮时，输入框内的数值会按照预设的步长进行递增；反之，点击“-”按钮则数值随之递减。当然了，在实际的业务场景中，为了保证数据的有效性与业务逻辑的严谨，数字加减框往往会内置完善的边界判断机制。例如，在购物场景下，用户点击减号时，数值不会无限降低至0或负数，而是会受制于“最小值”的限制；同样，当商品数量达到库存上限时，“+”按钮也会自动变为不可点击状态，防止超出库存情况的发生。

实现方式

实现方式呢，也是非常的简单，一个Row组件，左右两个图标组件SymbolGlyph，中间一个文本输入框组件TextInput，便可以搞定。这里左右之所以没有使用文本Text组件，是考虑到，加减组件的居中，如果采用了文本Text组件，使用内容“+-”来设置，如果在文字大小确定，无组件宽高设置的情况下，是没有问题的，但是，一旦设置了组件的宽高，文字的居中就会出现问题，所以，基于此，采用了图标组件SymbolGlyph来实现。

左右的加减，要根据传递的最大和最小数量进行判断，防止出现前言中的问题，其他的就是正常的数量加减，和数据的回调，相对来说，是非常的简单，代码就不多说了，目前已经上传到了中心仓库，大家可以直接使用。

中心仓库地址

https://ohpm.openharmony.cn/#/cn/detail/@abner%2Fnumber_box

下面针对这个组件，简单做一下使用介绍。

效果

快速使用

方式一：在Terminal窗口中，执行如下命令安装三方包，DevEco Studio会自动在工程的oh-package.json5中自动添加三方包依赖。

建议：在使用的模块路径下进行执行命令。

ohpm install @abner/number_box

方式二：在需要的模块中的oh-package.json5中设置三方包依赖，配置示例如下：

"dependencies": { "@abner/number_box": "^1.0.0"}

代码使用

简单使用

NumberBox({  onChange: (num) => {console.log("===数量改变监听：" + num)  }}).width(100)

设置初始值

NumberBox({  minNumber: 1, //最小值  maxNumber: 10, //最大值  defaultNumber: 2, //默认值  onChange: (num) => {console.log("===数量改变监听：" + num)  }}).width(100)

禁止编辑

NumberBox({  inputEnabled: false, //输入框禁止编辑  onChange: (num) => {console.log("===数量改变监听：" + num)  }}).width(100)

加减号超出后禁止点击

NumberBox({  minNumber: 1, //最小值  maxNumber: 5, //最大值  isAutoMinusPlusEnabled: true,  controlAttribute: (attr) => {    attr.plusMinusEnabledFontColor = Color.Gray //加减号禁止点击颜色  },  onChange: (num) => {console.log("===数量改变监听：" + num)  }}).width(100)

加减号禁止样式

NumberBox({  minNumber: 1, //最小值  maxNumber: 5, //最大值  isAutoMinusPlusEnabled: true, //是否自动禁止  inputAttribute: (attr) => {    attr.border = { radius: 5 }  },  controlAttribute: (attr) => {    attr.plusMinusEnabledFontColor = Color.Gray //加减号禁止点击颜色    attr.width = 18    attr.height = 18    attr.border = { radius: 18 }    attr.backgroundColor = "#ff968f8f"    attr.plusMinusEnabledBgColor = "#ffcfcdcd"//禁止背景颜色    attr.plusMinusEnabledBorder = { radius: 18 }  },  onChange: (num) => {console.log("===数量改变监听：" + num)  }}).width(100)

设置输入框圆角

NumberBox({  inputAttribute: (attr) => {    attr.border = { radius: 5 }  },  onChange: (num) => {console.log("===数量改变监听：" + num)  }}).width(100)

设置宽度

NumberBox({  inputAttribute: (attr) => {    attr.border = { radius: 5 }  },  onChange: (num) => {console.log("===数量改变监听：" + num)  }}).width(150)

设置样式

NumberBox({  inputAttribute: (attr) => {    attr.border = { radius: 5 }    attr.fontColor = Color.White    attr.backgroundColor = "#fff1b706"    attr.padding = 5  },  controlAttribute: (attr) => {    attr.width = 20    attr.height = 20    attr.fontColor = Color.White    attr.border = { radius: 3 }    attr.backgroundColor = "#fff1b706"  },  onChange: (num) => {console.log("===数量改变监听：" + num)  }}).width(100)

设置步长

NumberBox({  step: 5,//设置步长  inputAttribute: (attr) => {    attr.border = { radius: 5 }  },  onChange: (num) => {console.log("===数量改变监听：" + num)  }}).width(100)

输入框点击

NumberBox({  defaultNumber: this.defaultNumber,  inputAttribute: (attr) => {    attr.border = { radius: 5 }  },  onInputClick: () => {    inputMethod.getController().stopInputSession()this.dialogController.open()  },  onChange: (num) => {console.log("===数量改变监听：" + num)  }}).width(100)

获取输入值

NumberBox({  inputAttribute: (attr) => {    attr.border = { radius: 5 }  },  onChange: (num) => {this.inputText = numconsole.log("===数量改变监听：" + num)  }}).width(100)

属性介绍

常见属性配置如下：

InputAttribute

输入框属性配置如下

ControlAttribute

加减按钮属性配置如下：

相关总结

目前的数字加减框组件，基本上支持了大部分的常见场景，本身实现起来也不复杂，有需要的同学，可以直接使用，希望可以帮助到你。

本文来自网友投稿或网络内容，如有侵犯您的权益请联系我们删除，联系邮箱：wyl860211@qq.com 。

设置输入框圆角

设置宽度

设置样式

设置步长

输入框点击

获取输入值

InputAttribute

ControlAttribute

鸿蒙开发:一个简单的数字加减框组件

简单使用

设置初始值

禁止编辑

加减号超出后禁止点击

加减号禁止样式

最新文章

热门文章

随机文章

鸿蒙开发:一个简单的数字加减框组件

简单使用

设置初始值

禁止编辑

加减号超出后禁止点击

加减号禁止样式

设置输入框圆角

设置宽度

设置样式

设置步长

输入框点击

获取输入值

InputAttribute

ControlAttribute

鸿蒙应用更新目录01.05

开源鸿蒙具身智能探索与规划

最新文章

热门文章

随机文章