介绍
用于实现 计数增减 功能，内置了 加减按钮 和 计数显示 区域，可快速实现类似“数量调整”、“次数统计”等场景（如购物车商品数量、评分星星数等）。
如下图：
应用场景
- 商品数量
- 控制空调，显示温度
使用
默认包含 减号按钮（-）、计数显示区、加号按钮（+）三部分
子组件
需要包含子组件，用于在 计数显示区 显示数字
接口
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
}
})
}
}
}