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**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 22 23**系统能力：** SystemCapability.ArkUI.ArkUI.Full 24 25## 属性 26 27除支持[通用属性](ts-component-general-attributes.md)外，还支持以下属性。 28 29### enableInc<sup>10+</sup> 30 31enableInc(value: boolean) 32 33设置增加按钮禁用或使能。 34 35**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 36 37**系统能力：** SystemCapability.ArkUI.ArkUI.Full 38 39**参数：** 40 41| 参数名 | 类型 | 必填 | 说明 | 42| ------ | ------- | ---- | ------------------------------------- | 43| value | boolean | 是 | 增加按钮禁用或使能。<br/>默认值：true，true表示可以增加按钮，false表示禁止增加按钮。 | 44 45### enableDec<sup>10+</sup> 46 47enableDec(value: boolean) 48 49设置减少按钮禁用或使能。 50 51**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 52 53**系统能力：** SystemCapability.ArkUI.ArkUI.Full 54 55**参数：** 56 57| 参数名 | 类型 | 必填 | 说明 | 58| ------ | ------- | ---- | ------------------------------------- | 59| value | boolean | 是 | 减少按钮禁用或使能。<br/>默认值：true，true表示可以减少按钮，false表示禁止减少按钮。 | 60 61## 事件 62 63除支持[通用事件](ts-component-general-events.md)外，还支持以下事件： 64 65### onInc 66 67onInc(event: VoidCallback) 68 69监听数值增加事件。 70 71**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 72 73**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 74 75**系统能力：** SystemCapability.ArkUI.ArkUI.Full 76 77**参数：** 78 79| 参数名 | 类型 | 必填 | 说明 | 80| ------ | --------------------------------------------- | ---- | ----------------------------------- | 81| event | [VoidCallback](ts-types.md#voidcallback12) | 是 | Counter数值增加的回调函数。 | 82 83### onDec 84 85onDec(event: VoidCallback) 86 87监听数值减少事件。 88 89**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 90 91**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 92 93**系统能力：** SystemCapability.ArkUI.ArkUI.Full 94 95**参数：** 96 97| 参数名 | 类型 | 必填 | 说明 | 98| ------ | --------------------------------------------- | ---- | ----------------------------------- | 99| event | [VoidCallback](ts-types.md#voidcallback12) | 是 | Counter数值减少的回调函数。 | 100 101 102## 示例 103 104该示例展示了Counter组件的基本使用方法。点击+、-按钮可以修改value值。 105 106```ts 107// xxx.ets 108@Entry 109@Component 110struct CounterExample { 111 @State value: number = 0 112 113 build() { 114 Column() { 115 Counter() { 116 Text(this.value.toString()) 117 }.margin(100) 118 .onInc(() => { 119 this.value++ 120 }) 121 .onDec(() => { 122 this.value-- 123 }) 124 }.width("100%") 125 } 126} 127``` 128 129 130
