1# Counter 2 3计数器组件,提供相应的增加或者减少的计数操作。 4 5> **说明:** 6> 7> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12可以包含子组件。 13 14 15## 接口 16 17Counter() 18 19从API version 9开始,该接口支持在ArkTS卡片中使用。 20 21## 属性 22 23除支持[通用属性](ts-universal-attributes-size.md)外,还支持以下属性。 24 25| 名称 | 参数类型 | 描述 | 26| --------------------------- | ---------------------------------------- | ---------------------------------------- | 27| enableInc<sup>10+</sup> | boolean | 设置增加按钮禁用或使能。<br/>默认值:true | 28| enableDec<sup>10+</sup> | boolean | 设置减少按钮禁用或使能。<br/>默认值:true | 29 30## 事件 31 32除支持[通用事件](ts-universal-events-click.md)外,还支持以下事件: 33 34| 名称 | 功能描述 | 35| -------- | -------- | 36| onInc(event: () => void) | 监听数值增加事件。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 | 37| onDec(event: () => void) | 监听数值减少事件。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 | 38 39 40## 示例 41 42```ts 43// xxx.ets 44@Entry 45@Component 46struct CounterExample { 47 @State value: number = 0 48 49 build() { 50 Column() { 51 Counter() { 52 Text(this.value.toString()) 53 }.margin(100) 54 .onInc(() => { 55 this.value++ 56 }) 57 .onDec(() => { 58 this.value-- 59 }) 60 }.width("100%") 61 } 62} 63``` 64 65![zh-cn_image_0000001219982711](figures/zh-cn_image_0000001219982711.gif) 66