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