HarmonyOS：Counter计数器组件

ChinaDragon2025-06-06 13:58

一、概述

计数器组件，提供相应的增加或者减少的计数操作。
说明该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

二、属性

除支持通用属性外，还支持以下属性。

enableInc enableInc(value: boolean)

设置增加按钮禁用或使能。

元服务API：从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	boolean	是	增加按钮禁用或使能。默认值：true，true表示可以增加按钮，false表示禁止增加按钮。

enableDec enableDec(value: boolean)

设置减少按钮禁用或使能。

元服务API：从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	boolean	是	减少按钮禁用或使能。默认值：true，true表示可以减少按钮，false表示禁止减少按钮。

三、事件

除支持通用事件外，还支持以下事件：
onInc onInc(event: () => void)

监听数值增加事件。

卡片能力：从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API：从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full
onDec onDec(event: () => void)

监听数值减少事件。

卡片能力：从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API：从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

四、示例

示例效果图

示例代码 TestCounter.ets

scss 复制代码

@Entry
@Component
struct TestCounter {
  @State message: string = '计数器组件';
  @State value: number = 0;

  build() {
    Column({ space: 10 }) {
      Text('禁用计数器组件的增加和减少按钮')
        .id('TestCounterHelloWorld')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 20 })

      Counter() {
        Text(this.value.toString())
      }
      .enableDec(false)
      .enableInc(false)

      Text(this.message)
        .id('TestCounterHelloWorld')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 20 })

      Counter() {
        Text(this.value.toString())
      }
      .onInc(() => {
        this.value++
        console.log(`点击了 增加按钮 this.value = ${this.value}`);
      })
      .onDec(() => {
        this.value--
        console.log(`点击了 减少按钮 this.value = ${this.value}`);
      })
    }
    .height('100%')
    .width('100%')
  }
}