• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Counter
2
3计数器组件,提供相应的增加或者减少的计数操作。
4
5>  **说明:**
6>
7> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
8
9
10## 子组件
11
12可以包含子组件。
13
14
15## 接口
16
17Counter()
18
19从API version 9开始,该接口支持在ArkTS卡片中使用。
20
21## 属性
22
23除支持[通用属性](ts-universal-attributes-size.md)外,还支持以下属性。
24
25| 名称                          | 参数类型                               | 描述                                       |
26| --------------------------- | ---------------------------------------- | ---------------------------------------- |
27| enableInc<sup>10+</sup>              | boolean                            | 设置增加按钮禁用或使能。<br/>默认值:true   |
28| enableDec<sup>10+</sup>           | boolean                                  | 设置减少按钮禁用或使能。<br/>默认值:true |
29
30## 事件
31
32除支持[通用事件](ts-universal-events-click.md)外,还支持以下事件:
33
34| 名称 | 功能描述 |
35| -------- | -------- |
36| onInc(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 监听数值增加事件。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
37| onDec(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 监听数值减少事件。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
38
39
40## 示例
41
42```ts
43// xxx.ets
44@Entry
45@Component
46struct CounterExample {
47  @State value: number = 0
48
49  build() {
50    Column() {
51      Counter() {
52        Text(this.value.toString())
53      }.margin(100)
54      .onInc(() => {
55        this.value++
56      })
57      .onDec(() => {
58        this.value--
59      })
60    }.width("100%")
61  }
62}
63```
64
65![zh-cn_image_0000001219982711](figures/zh-cn_image_0000001219982711.gif)
66