HarmonyOS 6 Counter组件使用示例文档
文章目录
- 组件概述
- 核心能力
- 1. 组件接口
- 2. 关键属性（API 10+）
- 3. 关键事件
- 示例代码功能说明
- 代码逐段解释
- 1. 状态定义
- 2. 第一个 Counter（默认完整功能）
- 3. 第二个 Counter（禁用减号按钮）
- 4. 布局配置
- 运行效果
- 总结
组件概述
Counter 是 HarmonyOS 基础计数器组件，自带「+」「-」操作按钮，支持数值增减、按钮使能控制与事件监听，广泛用于商品数量、评分、次数统计等场景。
核心能力
1. 组件接口
Counter()- 无参构造，默认提供左右加减按钮。
- 内部可嵌套子组件（通常为 Text 显示当前数值）。
2. 关键属性（API 10+）
| 属性名 | 类型 | 默认值 | 作用 |
|---|---|---|---|
| enableInc | boolean | true | 控制「+ 增加按钮」是否可用 |
| enableDec | boolean | true | 控制「- 减少按钮」是否可用 |
3. 关键事件
| 事件名 | 回调 | 触发时机 |
|---|---|---|
| onInc | () => void | 点击 + 按钮时触发 |
| onDec | () => void | 点击 - 按钮时触发 |
示例代码功能说明
示例实现两组计数器：
- 第一组 Counter：完全默认，加减按钮均可用，点击±修改数值。
- 第二组 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。
运行效果
- 第一个计数器：+ / - 按钮均可点击，数值可增可减。
- 第二个计数器：- 按钮置灰禁用，只能点击 + 增加数值。
运行如图：
总结
必须嵌套子组件
Counter 本身不显示数值，内部必须放 Text 等组件展示数字。按钮控制逻辑
enableInc(false)：禁用加号。enableDec(false)：禁用减号。- 常用于限制最小值（如数量不能 < 0）或最大值。
事件必须绑定
点击按钮不会自动改数值，必须在onInc / onDec里手动更新@State变量。适用场景
- 商品购买数量选择
- 打卡/签到次数统计
- 评分、数量调整
- 表单内数字输入
如果这篇文章对你有帮助，欢迎点赞、收藏、关注，你的支持是持续创作的动力