1# advanced.Counter
2
3Counter是用于精确调节数值的组件。
4
5>  **说明：**
6>
7>  该组件从API Version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8
9## 导入模块
10
11```
12import { CounterType, CounterComponent, CounterOptions, DateData } from '@kit.ArkUI';
13```
14
15##  子组件
16
17无
18
19## CounterComponent
20
21CounterComponent({ options: CounterOptions })
22
23定义计数器组件。
24
25**装饰器类型：**@Component
26
27**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
28
29**系统能力：** SystemCapability.ArkUI.ArkUI.Full
30
31**参数**：
32
33| 名称   | 类型                              | 必填 | 装饰器类型 | 说明                    |
34| ------- | --------------------------------- | ---- | ---------- | ----------------------- |
35| options | [CounterOptions](#counteroptions) | 是   | @Prop      | 定义counter组件的类型。 |
36
37## CounterOptions
38
39CounterOptions定义Counter的类型及具体式样参数。
40
41**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
42
43**系统能力：** SystemCapability.ArkUI.ArkUI.Full
44
45| 名称        | 类型       | 必填        | 说明                            |
46| ----------- | ---------- | ------| --------------------------------- |
47| type | [CounterType](#countertype) | 是   | 指定当前Counter的类型。 |
48| direction<sup>12+</sup> | [Direction](ts-appendix-enums.md#direction) | 否 | 布局方向。<br/>默认值：Direction.Auto |
49| numberOptions | [NumberStyleOptions](#numberstyleoptions) | 否    | 列表型和紧凑型counter的式样。 |
50| inlineOptions | [InlineStyleOptions](#inlinestyleoptions) | 否 | 普通数字内联调节型Counter的式样。 |
51| dateOptions | [DateStyleOptions](#datestyleoptions) | 否 | 日期型内联型counter的式样。 |
52
53选择不同的counter类型，需要选择对应的counter式样，其对应关系如下：
54
55| counter类型             | counter式样        |
56| ----------------------- | ------------------ |
57| CounterType.LIST        | NumberStyleOptions |
58| CounterType.COMPACT     | NumberStyleOptions |
59| CounterType.INLINE      | InlineStyleOptions |
60| CounterType.INLINE_DATE | DateStyleOptions   |
61
62## CounterType
63
64CounterType指定Counter的类型，如列表型Counter。
65
66**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
67
68**系统能力：** SystemCapability.ArkUI.ArkUI.Full
69
70| 名称        | 值   | 说明                        |
71| ----------- | ---- | --------------------------- |
72| LIST        | 0    | 列表型Counter。             |
73| COMPACT     | 1    | 紧凑型Counter。             |
74| INLINE      | 2    | 普通数字内联调节型Counter。 |
75| INLINE_DATE | 3    | 日期型内联型Counter。       |
76
77## CommonOptions
78
79CommonOptions定义Counter的共通属性和事件。
80
81**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
82
83**系统能力：** SystemCapability.ArkUI.ArkUI.Full
84
85
86| 名称            | 类型                      | 必填 | 说明                                                         |
87| --------------- | ------------------------- | ---- | ------------------------------------------------------------ |
88| focusable       | boolean                   | 否   | 设置Counter是否可以获焦。<br/>**说明：** <br/>该属性对列表型、紧凑型Counter生效。<br/>默认值：true |
89| step            | number                    | 否   | 设置Counter的步长。<br/>取值范围：大于等于1的整数。<br/>默认值：1 |
90| onHoverIncrease | (isHover: boolean) =>void | 否   | 鼠标进入或退出Counter组件的增加按钮触发该回调。<br/>isHover：表示鼠标是否悬浮在组件上，鼠标进入时为true, 退出时为false。 |
91| onHoverDecrease | (isHover: boolean) =>void | 否   | 鼠标进入或退出Counter组件的减小按钮触发该回调。<br/>isHover：表示鼠标是否悬浮在组件上，鼠标进入时为true, 退出时为false。 |
92
93##  InlineStyleOptions
94
95InlineStyleOptions定义Inline Style（数值内联型Counter）的属性和事件。
96
97继承于[CommonOptions ](#commonoptions)。
98
99**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
100
101**系统能力：** SystemCapability.ArkUI.ArkUI.Full
102
103| 名称      | 类型                   | 必填 | 说明                                                   |
104| --------- | ---------------------- | ---- | ------------------------------------------------------ |
105| value     | number                 | 否   | 设置Counter的初始值。<br/>默认值：0                    |
106| min       | number                 | 否   | 设置Counter的最小值。<br/>默认值：0                    |
107| max       | number                 | 否   | 设置Counter的最大值。<br/>默认值：999                  |
108| textWidth | number                 | 否   | 设置数值文本的宽度。<br/>默认值：0                     |
109| onChange  | (value: number) =>void | 否   | 当数值改变时，返回当前值。<br/>value：当前显示的数值。 |
110
111## NumberStyleOptions
112
113NumberStyleOptions定义Number style（列表型Counter和紧凑型Counter）的属性和事件。
114
115继承于[InlineStyleOptions](#inlinestyleoptions)。
116
117**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
118
119**系统能力：** SystemCapability.ArkUI.ArkUI.Full
120
121| 名称            | 类型                                   | 必填 | 说明                                          |
122| --------------- | -------------------------------------- | ---- | --------------------------------------------- |
123| label           | [ResourceStr](ts-types.md#resourcestr) | 否   | 设置Counter的说明文本。                       |
124| onFocusIncrease | () =>void                              | 否   | 当前Counter组件增加按钮获取焦点时触发的回调。 |
125| onFocusDecrease | () =>void                              | 否   | 当前Counter组件减小按钮获取焦点时触发的回调。 |
126| onBlurIncrease  | () =>void                              | 否   | 当前Counter组件增加按钮失去焦点时触发的回调。 |
127| onBlurDecrease  | () =>void                              | 否   | 当前Counter组件减小按钮失去焦点时触发的回调。 |
128
129## DateStyleOptions
130
131DateStyleOptions定义Date style（日期内联型Counter）的属性和事件。
132
133继承于[CommonOptions ](#commonoptions)。
134
135**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
136
137**系统能力：** SystemCapability.ArkUI.ArkUI.Full
138
139| 名称         | 类型                                | 必填 | 说明                                                      |
140| ------------ | ----------------------------------- | ---- | --------------------------------------------------------- |
141| year         | number                              | 否   | 设置日期内联型初始年份。<br/>默认值：1                    |
142| month        | number                              | 否   | 设置日期内联型初始月份。<br/>默认值：1                    |
143| day          | number                              | 否   | 设置日期内联型初始日。<br/>默认值：1                      |
144| onDateChange | (date: [DateData](#datedata))=>void | 否   | 当日期改变时，返回当前日期。<br/>date：当前显示的日期值。 |
145
146## DateData
147
148DateData定义Date通用属性和方法，如年、月、日。
149
150**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
151
152**系统能力：** SystemCapability.ArkUI.ArkUI.Full
153
154| 名称  | 类型   | 只读 | 可选 | 说明                     |
155| ----- | ------ | ---- | ---- | ------------------------ |
156| year  | number | 否   | 否   | 设置日期内联型初始年份。 |
157| month | number | 否   | 否   | 设置日期内联型初始月份。 |
158| day   | number | 否   | 否   | 设置日期内联型初始日。   |
159
160### constructor
161
162constructor(year: number, month: number, day: number)
163
164DateData的构造函数。
165
166**原子化服务API**：从API version 12 开始，该接口支持在原子化服务中使用。
167
168**系统能力：** SystemCapability.ArkUI.ArkUI.Full
169
170| 参数名 | 类型 | 说明 |
171| ---------- | ------ | ---------------------------- |
172| year       | number | 设置日期内联型初始年份。     |
173| month      | number | 设置日期内联型初始月份。     |
174| day        | number | 设置日期内联型初始日。       |
175
176### toString
177
178toString(): string
179
180以字符串格式返回当前日期值。
181
182**原子化服务API**：从API version 12 开始，该接口支持在原子化服务中使用。
183
184**系统能力：** SystemCapability.ArkUI.ArkUI.Full
185
186**返回值：**
187
188| 类型 | 说明 |
189| -------- | -------- |
190| string | 当前日期值。 |
191
192## 示例
193
194### 示例1（列表型Counter）
195
196该示例通过设置type为CounterType.LIST以及numberOptions，实现列表型Counter。
197
198```ts
199import { CounterType, CounterComponent } from '@kit.ArkUI';
200
201@Entry
202@Component
203struct ListCounterExample {
204  build() {
205    Column() {
206      //列表型Counter
207      CounterComponent({
208        options: {
209          type: CounterType.LIST,
210          numberOptions: {
211            label: "价格",
212            min: 0,
213            value: 5,
214            max: 10
215          }
216        }
217      })
218    }
219  }
220}
221```
222
223![listcounter](figures/listcounter.gif)
224### 示例2（紧凑型Counter）
225
226该示例通过设置type为CounterType.COMPACT以及numberOptions，实现紧凑型Counter。
227
228```ts
229import { CounterType, CounterComponent } from '@kit.ArkUI';
230
231@Entry
232@Component
233struct CompactCounterExample {
234  build() {
235    Column() {
236      //紧凑型Counter
237      CounterComponent({
238        options: {
239          type: CounterType.COMPACT,
240          numberOptions: {
241            label: "数量",
242            value: 10,
243            min: 0,
244            max: 100,
245            step: 10
246          }
247        }
248      })
249    }
250  }
251}
252```
253![compactcounter](figures/compactcounter.gif)
254### 示例3（数值内联型Counter）
255
256该示例通过设置type为CounterType.INLINE以及inlineOptions，实现数值内联型Counter。
257
258```ts
259import { CounterType, CounterComponent } from '@kit.ArkUI';
260
261@Entry
262@Component
263struct NumberStyleExample {
264  build() {
265    Column() {
266      //数值内联型Counter
267      CounterComponent({
268        options: {
269          type: CounterType.INLINE,
270          inlineOptions: {
271            value: 100,
272            min: 10,
273            step: 2,
274            max: 1000,
275            textWidth: 100,
276            onChange: (value: number) => {
277              console.log("onDateChange Date: " + value.toString());
278            }
279          }
280        }
281      })
282    }
283  }
284}
285```
286![numberstyle](figures/numberstyle.gif)
287### 示例4（日期内联型Counter）
288
289该示例通过设置type为CounterType.INLINE_DATE以及dateOptions，实现日期内联型Counter，用户可以手动输入日期。
290
291```ts
292import { CounterType, CounterComponent, DateData } from '@kit.ArkUI';
293
294@Entry
295@Component
296struct DataStyleExample {
297  build() {
298    Column() {
299      //日期内联型counter
300      CounterComponent({
301        options: {
302          type: CounterType.INLINE_DATE,
303          dateOptions: {
304            year: 2016,
305            onDateChange: (date: DateData) => {
306              console.log("onDateChange Date: " + date.toString());
307            }
308          }
309        }
310      })
311    }
312  }
313}
314```
315![datestyle](figures/datestyle.gif)
316
317### 示例5（镜像布局展示）
318
319该示例通过设置direction属性，实现列表型、紧凑型、数字内联型、日期内联型Counter进行镜像布局。
320
321```ts
322// xxx.ets
323import { CounterType, CounterComponent, DateData } from '@kit.ArkUI';
324
325@Entry
326@Component
327struct CounterPage {
328  @State currentDirection: Direction = Direction.Rtl
329
330  build() {
331    Column({}) {
332
333      //列表型Counter
334      CounterComponent({
335        options: {
336          direction: this.currentDirection,
337          type: CounterType.LIST,
338          numberOptions: {
339            label: "价格",
340            min: 0,
341            value: 5,
342            max: 10,
343          }
344        }
345      })
346        .width('80%')
347
348      //数值型Counter
349      CounterComponent({
350        options: {
351          direction: this.currentDirection,
352          type: CounterType.COMPACT,
353          numberOptions: {
354            label: "数量",
355            value: 10,
356            min: 0,
357            max: 100,
358            step: 10
359          }
360        }
361      }).margin({ top: 20 })
362
363      //数值内联型Counter
364      CounterComponent({
365        options: {
366          type: CounterType.INLINE,
367          direction: this.currentDirection,
368          inlineOptions: {
369            value: 100,
370            min: 10,
371            step: 2,
372            max: 1000,
373            textWidth: 100,
374            onChange: (value: number) => {
375              console.log("onDateChange Date: " + value.toString());
376            }
377          }
378        }
379      }).margin({ top: 20 })
380      //日期内联型counter
381      CounterComponent({
382        options: {
383          direction: this.currentDirection,
384          type: CounterType.INLINE_DATE,
385          dateOptions: {
386            year: 2024,
387            onDateChange: (date: DateData) => {
388              console.log("onDateChange Date: " + date.toString());
389            }
390          }
391        }
392      }).margin({ top: 20 })
393    }
394    .width('100%')
395    .height('100%')
396    .justifyContent(FlexAlign.Center)
397    .alignItems(HorizontalAlign.Center)
398  }
399}
400```
401![datestyle](figures/counter_direction.png)
402