harmony 鸿蒙Counter

2025-06-12
浏览 (3)

Counter

The Counter component provides an operation to increase or decrease the number.

NOTE

This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.

Child Components

Supported

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

Attributes

In addition to the universal attributes, the following attributes are supported.

enableInc¹⁰⁺

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. true (default): Enable the increment button. false: Disable the increment button.

enableDec¹⁰⁺

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. true (default): Enable the decrement button. false: Disable the decrement button.

Events

In addition to the universal events, the following events are supported.

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.

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 value: number = 0

  build() {
    Column() {
      Counter() {
        Text(this.value.toString())
      }.margin(100)
      .onInc(() => {
        this.value++
      })
      .onDec(() => {
        this.value--
      })
    }.width("100%")
  }
}

en-us_image_0000001212378424