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