【带你轻松学】ArkUI容器类组件-计数器组件（Counter）

往期知识点整理

• 鸿蒙（HarmonyOS）北向开发知识点记录~
• 鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~
• 被裁员后，踏上了鸿蒙开发求职之路
• 记录一场鸿蒙开发岗位面试经历~
• 持续更新中……

ArkUI 开发框架提供了 Counter 组件实现计数器功能，计数器的使用场景很常见，比如购物类 APP 在添加或者减少商品的时候会使用到计数器，它可以包含一个子组件，本节笔者简单介绍一下 Counter 的使用。

Counter 定义介绍

interface CounterInterface {
  (): CounterAttribute;
}

由源码可知，Counter 使用时暂不需要配置额外参数。

简单样例如下所示：

@Entry @Component struct ComponentTest {
  build() {
    Column() {
      Row() {
        Counter()         // 默认效果

        Counter() {       // 包含一个子组件
          Text('1')       // Text 默认值为 1
            .fontSize(18) // Text 字体大小
        }
      }
      .justifyContent(FlexAlign.SpaceAround)
      .width("100%")
    }
    .width("100%")
    .height("100%")
    .padding(10)
  }
}

Counter 事件介绍

declare class CounterAttribute extends CommonMethod<CounterAttribute> {
  onInc(event: () => void): CounterAttribute;
  onDec(event: () => void): CounterAttribute;
}

Counter 没有提供额外的属性方法，只提供了 onInc() 和 onDec() 两个事件回调方法，各方法说明如下所示：

• onInc：数字增加的事件回调。
• onDec：数字减少的事件回调。

Counter 完整样例

@Entry @Component struct ComponentTest {

  @State value: number = 0

  build() {
    Column() {
      Counter() {
        Text(this.value.toString())
          .fontSize(18)
      }
      .onInc(() => {  // 自增操作
        this.value++;
      })
      .onDec(() => {  // 自减操作
        this.value--;
      })
    }
    .width("100%")
    .height("100%")
    .padding(20)
  }
}