The Counter component provides an operation to increase or decrease the number.
This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
This component supports WithTheme since API version 26.0.0.
APIs
Counter()
Widget capability: This API can be used in ArkTS widgets since API version 9.
Atomic service API: This API can be used in atomic services since API version 11.
System capability: SystemCapability.ArkUI.ArkUI.Full
[h2]enableInc10+
enableInc(value: boolean)
Sets whether to enable the increment button.
Atomic service API: This API can be used in atomic services since API version 11.
System capability: SystemCapability.ArkUI.ArkUI.Full
Parameters
| Name | Type | Mandatory | Description |
|---|---|---|---|
| value | boolean | Yes | Whether to enable the increment button. Default value: true. The value true means to enable the increment button, and the value false means the opposite. |
[h2]enableDec10+
enableDec(value: boolean)
Sets whether to enable the decrement button.
Atomic service API: This API can be used in atomic services since API version 11.
System capability: SystemCapability.ArkUI.ArkUI.Full
Parameters
| Name | Type | Mandatory | Description |
|---|---|---|---|
| value | boolean | Yes | Whether to enable the decrement button. Default value: true. The value true means to enable the decrement button, and the value false means the opposite. |
[h2]onInc
onInc(event: VoidCallback)
Invoked when the value increases.
Widget capability: This API can be used in ArkTS widgets since API version 9.
Atomic service API: This API can be used in atomic services since API version 11.
System capability: SystemCapability.ArkUI.ArkUI.Full
Parameters
| Name | Type | Mandatory | Description |
|---|---|---|---|
| event | VoidCallback | Yes | Callback invoked when the value increases. |
[h2]onDec
onDec(event: VoidCallback)
Invoked when the value decreases.
Widget capability: This API can be used in ArkTS widgets since API version 9.
Atomic service API: This API can be used in atomic services since API version 11.
System capability: SystemCapability.ArkUI.ArkUI.Full
Parameters
| Name | Type | Mandatory | Description |
|---|---|---|---|
| event | VoidCallback | Yes | Callback invoked when the value decreases. |
Example
This example shows the basic usage of the Counter component. Users can touch the + or - button to adjust the value.
// xxx.ets
@Entry
@Component
struct CounterExample {
@State value1: number = 0;
@State value2: number = 0;
build() {
Column({ space: 50 }) {
Counter() {
Text(this.value1.toString())
}
.onInc(() => {
this.value1++;
})
.onDec(() => {
this.value1--;
})
Counter() {
Text(this.value2.toString())
}
.onInc(() => {
this.value2++;
})
.onDec(() => {
this.value2--;
})
.enableInc(true)
.enableDec(false)
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
}
} 