鸿蒙开发：一个简单的数字加减框组件目前的数字加减框组件，基本上支持了大部分的常见场景，本身实现起来也不复杂，有需要的同学

前言

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

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

实现方式

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

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

中心仓库地址

ohpm.openharmony.cn/#/cn/detail…

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

效果

快速使用

方式一：在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 = num
    console.log("===数量改变监听：" + num)
  }
}).width(100)

属性介绍

常见属性配置如下：

属性	类型	概述
maxNumber	number	最大数量
minNumber	number	最小数量，默认为1
defaultNumber	number	默认数量，默认为1
onChange	(num: number) => void	数量改变回调
step	number	步长，默认为1
minusEnabled	boolean	是否禁止减按钮，默认false不禁止
plusEnabled	boolean	是否禁止加按钮，默认false不禁止
inputEnabled	boolean	是否禁止输入框编辑，默认false不禁止
isAutoMinusPlusEnabled	boolean	加减号是否自动禁止,默认false不禁止
onInputClick	() => void	输入框点击事件
onPlusExceed	() => void	点击+超过最大数量是否回调，默认为提示，设置后，自己做处理
onMinusExceed	() => void	点击-小于最小数量是否回调，默认为提示，设置后，自己做处理
inputAttribute	(attr: InputAttribute) => void	输入框属性设置
controlAttribute	(attr: ControlAttribute) => void	加减按钮属性设置

InputAttribute

输入框属性配置如下

属性	类型	概述
width	Length	输入框宽
height	Length	输入框高
fontSize	Length	文字大小
fontColor	ResourceColor	文字颜色
fontWeight	number / FontWeight / ResourceStr	文字字重
fontStyle	FontStyle	文字样式
fontFamily	ResourceStr	文字字体
backgroundColor	ResourceColor	输入框背景
marginLeft	Length	输入框距离左边
marginRight	Length	输入框距离右边
padding	Padding / Length / LocalizedPadding	输入框内边距
maxLength	number	输入框最大输入长度
placeholderColor	ResourceColor	提示文本颜色
placeholderFontSize	Length	提示文本大小
placeholderFontWeight	FontWeight / number / string	提示文本字重
placeholderFontFamily	string / Resource	提示文本字体
placeholderFontStyle	FontStyle	提示文本样式
border	BorderOptions	输入框边框属性集合

ControlAttribute

加减按钮属性配置如下：

属性	类型	概述
width	Length	按钮宽度
height	Length	按钮高度
fontSize	number /string /Resource	按钮文字大小
backgroundColor	ResourceColor	按钮背景颜色
fontColor	ResourceColor	按钮文字颜色
fontWeight	number / FontWeight / string	按钮字重
border	BorderOptions	按钮边框属性集合
plusMinusEnabledFontColor	ResourceColor	加减号禁止点击颜色
plusMinusEnabledBgColor	ResourceColor	加减号禁止背景颜色
plusMinusEnabledBorder	BorderOptions	加减号禁止边框属性集合

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

前言