HarmonyOS 6 Counter组件使用示例文档

组件概述

Counter 是 HarmonyOS 基础计数器组件，自带「+」「-」操作按钮，支持数值增减、按钮使能控制与事件监听，广泛用于商品数量、评分、次数统计等场景。

核心能力

1. 组件接口

Counter()

• 无参构造，默认提供左右加减按钮。
• 内部可嵌套子组件（通常为 Text 显示当前数值）。

2. 关键属性（API 10+）

3. 关键事件

示例代码功能说明

示例实现两组计数器：

1. 第一组 Counter：完全默认，加减按钮均可用，点击±修改数值。
2. 第二组 Counter：禁用减号按钮（enableDec(false)），只能加不能减。

代码逐段解释

1. 状态定义

@Statevalue1:number=0;@Statevalue2:number=0;

• 使用@State定义响应式数值，变化时自动刷新 UI。
• 分别绑定两个 Counter 显示。

2. 第一个 Counter（默认完整功能）

Counter(){Text(this.value1.toString())}.onInc(()=>{this.value1++;}).onDec(()=>{this.value1--;})

• 内部嵌套Text显示当前计数。
• onInc：点击 + 数值 +1。
• onDec：点击 - 数值 -1。

3. 第二个 Counter（禁用减号按钮）

Counter(){Text(this.value2.toString())}.onInc(()=>{this.value2++;}).onDec(()=>{this.value2--;}).enableInc(true).enableDec(false)

• enableInc(true)：加号按钮可用（默认可省略）。
• enableDec(false)：减号按钮禁用置灰，无法点击。
• 点击减号不会触发onDec，数值不会减少。

4. 布局配置

Column({space:50}).width('100%').height('100%').justifyContent(FlexAlign.Center)

• 垂直居中布局，两个 Counter 间距 50vp。

运行效果

1. 第一个计数器：+ / - 按钮均可点击，数值可增可减。
2. 第二个计数器：- 按钮置灰禁用，只能点击 + 增加数值。
   运行如图：
   

总结

1. 必须嵌套子组件
   Counter 本身不显示数值，内部必须放 Text 等组件展示数字。

2. 按钮控制逻辑

   • enableInc(false)：禁用加号。
   • enableDec(false)：禁用减号。
   • 常用于限制最小值（如数量不能 < 0）或最大值。

3. 事件必须绑定
   点击按钮不会自动改数值，必须在onInc / onDec里手动更新@State变量。

4. 适用场景

   • 商品购买数量选择
   • 打卡/签到次数统计
   • 评分、数量调整
   • 表单内数字输入

如果这篇文章对你有帮助，欢迎点赞、收藏、关注，你的支持是持续创作的动力