ArkUI容器类组件-计数器组件（Counter）

2024-09-30 14:31:58 浏览数 (3)

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

Counter 定义介绍

代码语言：ts复制
interface CounterInterface {
  (): CounterAttribute;
}

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

简单样例如下所示：

代码语言：ts复制
@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 事件介绍

代码语言：ts复制
declare class CounterAttribute extends CommonMethod<CounterAttribute> {
  onInc(event: () => void): CounterAttribute;
  onDec(event: () => void): CounterAttribute;
}

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

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

Counter 完整样例

代码语言：ts复制
@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)
  }
}

写在最后

如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：