5.8：计数器组件（Counter）
ArkUI 开发框架提供了 Counter 组件实现计数器功能，计数器的使用场景很常见，比如购物类 APP 在添加或者减少商品的时候会使用到计数器，它可以包含一个子组件，本节笔者简单介绍一下 Counter 的使用。
5.8.1：Counter 定义介绍
interface CounterInterface {
(): CounterAttribute;
}
1
2
3
由源码可知，Counter 使用时暂不需要配置额外参数。
简单样例如下所示：
@Entry @Component struct ComponentTest {
build() {
Column() {
Row() {
Counter()
Counter() {
Text('1')
.fontSize(18)
}
}
.justifyContent(FlexAlign.SpaceAround)
.width("100%")
}
.width("100%")
.height("100%")
.padding(10)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@Entry @Component class MyView {
func build() {
Column() {
Row() {
Counter() {}
Counter() {
Text('1')
.fontSize(18)
}
}
.justifyContent(FlexAlign.SpaceAround)
.width(100.percent)
}
.width(100.percent)
.height(100.percent)
.padding(10)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
样例运行结果如下图所示：
5.8.2：Counter 事件介绍
declare class CounterAttribute extends CommonMethod<CounterAttribute> {
onInc(event: () => void): CounterAttribute;
onDec(event: () => void): CounterAttribute;
}
1
2
3
4
Counter 没有提供额外的属性方法，只提供了 onInc() 和 onDec() 两个事件回调方法，各方法说明如下所示：
- onInc：数字增加的事件回调。
- onDec：数字减少的事件回调。
5.8.3：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)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@Entry @Component class MyView {
@State var value: Int = 0
func build() {
Column() {
Counter() {
Text("${this.value}")
.fontSize(18)
}
.onInc({ =>
this.value++;
})
.onDec({ =>
this.value--;
})
}
.width(100.percent)
.height(100.percent)
.padding(20)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
样例运行结果如下图所示：
📢：Counter 不支持通用事件和手势， 仅支持 onInc() 和 onDec() 事件。
(adsbygoogle = window.adsbygoogle || []).push({});
