HarmonyOS NEXT鸿蒙开发ArkUI：Counter计数器组件（实现购买商品数量） 作者：马育民 • 2025-11-19 10:01 • 阅读：10010 # 介绍 [官网API](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-counter-V5 "官网API") 用于实现 **计数增减** 功能，内置了 `加减按钮` 和 `计数显示` 区域，可快速实现类似“数量调整”、“次数统计”等场景（如购物车商品数量、评分星星数等）。 如下图： [](https://www.malaoshi.top/upload/0/0/1GW2FoluyCNC.png) ### 应用场景 - 商品数量 - 控制空调，显示温度 # 使用 默认包含 `减号按钮（-）`、`计数显示区`、`加号按钮（+）`三部分 ### 子组件 需要包含子组件，用于在 `计数显示区` 显示数字 ### 接口 ``` Counter() ``` ### 例子 ``` Counter(){ Text("1") // 包含子组件，显示数字 } ``` # 属性 ### enableInc 设置增加按钮禁用、可用 ``` enableInc(value: boolean) ``` **参数：** - value：`boolean` 类型，必填，增加按钮禁用或使能。默认值：true ### enableDec 设置减少按钮禁用、可用。 ``` enableDec(value: boolean) ``` **参数：** - value：`boolean` 类型，必填，减少按钮禁用或使能。默认值：true # 事件 ### onInc 监听数值增加事件。 ``` onInc(event: () => void) ``` ### onDec 监听数值减少事件。 ``` onDec(event: () => void) ``` # 例子 实现商品购买数量增减功能 当计数为0时，禁用减号按钮（避免出现负数） 当计数达到2时，禁用加号按钮（如：国补最多只能买2件商品） ``` @Entry @Component struct Index { // 定义状态变量 num @State num:number = 1 // 控制 + 按钮是否可用 @State numEnableInc:boolean = true // 控制 - 按钮是否可用 @State numEnableDec:boolean = true build() { // 列示布局 Column(){ // 首字母大写 Text("iphone17") Counter(){ // toString() 将number类型转成字符串类型 Text(this.num.toString()) // 组件包含子组件，显示数字 } .enableInc(this.numEnableInc) .enableDec(this.numEnableDec) .onInc( () =>{ // 点击 +，触发该事件 this.num ++ // 让num自增1 this.numEnableDec = true // 设置 + 按钮可用 if( this.num >= 2){ // 双十一，没人最多买2个iphone this.numEnableInc = false } }) .onDec( () => { // 点击 -，触发事件 this.num -- this.numEnableInc = true // 设置 - 按钮可用 if(this.num <=0 ){ this.numEnableDec = false } }) } } } ``` 原文出处：http://malaoshi.top/show_1GW2FpM10g0Y.html