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

前言

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

具体的业务逻辑也是非常的简单，当用户点击"+"按钮时，输入框内的数值会按照预设的步长进行递增；反之，点击"-"按钮则数值随之递减。当然了，在实际的业务场景中，为了保证数据的有效性与业务逻辑的严谨，数字加减框往往会内置完善的边界判断机制。例如，在购物场景下，用户点击减号时，数值不会无限降低至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 = 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 | 加减号禁止边框属性集合 |

相关总结

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