1# @ohos.arkui.advanced.Counter (计数器组件) 2 3Counter是用于精确调节数值的组件。 4 5> **说明：** 6> 7> 该组件从API Version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## 导入模块 10 11``` 12import {CounterType, CounterComponent, CounterOptions, DateData} from '@ohos.arkui.advanced.Counter'; 13``` 14 15## 子组件 16 17无 18 19## CounterComponent 20 21CounterComponent({ options: CounterOptions }) 22 23定义计数器组件。 24 25**装饰器类型：**@Component 26 27**系统能力：** SystemCapability.ArkUI.ArkUI.Full 28 29**参数**： 30 31| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 32| ------- | --------------------------------- | ---- | ---------- | ----------------------- | 33| options | [CounterOptions](#counteroptions) | 是 | @Prop | 定义counter组件的类型。 | 34 35## CounterOptions 36 37CounterOptions定义Counter的类型及具体式样参数。 38 39**系统能力：** SystemCapability.ArkUI.ArkUI.Full 40 41| 名称 | 类型 | 必填 | 说明 | 42| ----------- | ---------- | ------| --------------------------------- | 43| type | [CounterType](#countertype) | 是 | 指定当前Counter的类型。 | 44| numberOptions | [NumberStyleOptions](#numberstyleoptions) | 否 | 列表型和紧凑型counter的式样。 | 45| inlineOptions | [InlineStyleOptions](#inlinestyleoptions) | 否 | 数值型内联型counter的式样。 | 46| dateOptions | [DateStyleOptions](#datestyleoptions) | 否 | 日期型内联型counter的式样。 | 47 48选择不同的counter类型，需要选择对应的counter式样，其对应关系如下： 49 50| counter类型 | counter式样 | 51| ----------------------- | ------------------ | 52| CounterType.LIST | NumberStyleOptions | 53| CounterType.COMPACT | NumberStyleOptions | 54| CounterType.INLINE | InlineStyleOptions | 55| CounterType.INLINE_DATE | DateStyleOptions | 56 57## CounterType 58 59CounterType指定Counter的类型，如列表型Counter。 60 61**系统能力：** SystemCapability.ArkUI.ArkUI.Full 62 63| 名称 | 说明 | 64| ----------- | --------------------------- | 65| LIST | 列表型Counter。 | 66| COMPACT | 紧凑型Counter。 | 67| INLINE | 普通数字内联调节型Counter。 | 68| INLINE_DATE | 日期型内联型Counter。 | 69 70## CommonOptions 71 72CommonOptions定义Counter的共通属性和事件。 73 74**系统能力：** SystemCapability.ArkUI.ArkUI.Full 75 76 77| 名称 | 类型 | 必填 | 默认值 | 说明 | 78| --------------- | ------------------------- | ---- | ------ | ------------------------------------------------------------ | 79| focusable | boolean | 否 | true | 设置Counter是否可以获焦。 | 80| step | number | 否 | 1 | 设置Counter的步长。<br/>取值范围：大于等于1的整数。 | 81| onHoverIncrease | (isHover: boolean) =>void | 否 | - | 鼠标进入或退出Counter组件的增加按钮触发该回调。<br/>isHover：表示鼠标是否悬浮在组件上，鼠标进入时为true, 退出时为false。 | 82| onHoverDecrease | (isHover: boolean) =>void | 否 | - | 鼠标进入或退出Counter组件的减小按钮触发该回调。<br/>isHover：表示鼠标是否悬浮在组件上，鼠标进入时为true, 退出时为false。 | 83 84## InlineStyleOptions 85 86InlineStyleOptions定义Inline Style（数值内联型Counter）的属性和事件。 87 88继承于[CommonOptions ](#commonoptions) 89 90**系统能力：** SystemCapability.ArkUI.ArkUI.Full 91 92| 名称 | 类型 | 必填 | 默认值 | 说明 | 93| --------- | ---------------------- | ---- | ------ | ------------------------------------------------------ | 94| value | number | 否 | 0 | 设置Counter的初始值。 | 95| min | number | 否 | 0 | 设置Counter的最小值。 | 96| max | number | 否 | 999 | 设置Counter的最大值。 | 97| textWidth | number | 否 | 0 | 设置数值文本的宽度。 | 98| onChange | (value: number) =>void | 否 | - | 当数值改变时，返回当前值。<br/>value：当前显示的数值。 | 99 100## NumberStyleOptions 101 102NumberStyleOptions定义Number style（列表型Counter和紧凑型Counter）的属性和事件。 103 104继承于[InlineStyleOptions](#inlinestyleoptions) 105 106**系统能力：** SystemCapability.ArkUI.ArkUI.Full 107 108| 名称 | 类型 | 必填 | 默认值 | 说明 | 109| --------------- | ------------------------------------------------------------ | ---- | ------ | --------------------------------------------- | 110| label | [ResourceStr](ts-types.md#resourcestr) | 否 | - | 设置Counter的说明文本。 | 111| onFocusIncrease | () =>void | 否 | - | 当前Counter组件增加按钮获取焦点时触发的回调。 | 112| onFocusDecrease | () =>void | 否 | - | 当前Counter组件减小按钮获取焦点时触发的回调。 | 113| onBlurIncrease | () =>void | 否 | - | 当前Counter组件增加按钮失去焦点时触发的回调。 | 114| onBlurDecrease | () =>void | 否 | - | 当前Counter组件减小按钮失去焦点时触发的回调。 | 115 116## DateStyleOptions 117 118DateStyleOptions定义Date style（日期内联型Counter）的属性和事件。 119 120继承于[CommonOptions ](#commonoptions) 121 122**系统能力：** SystemCapability.ArkUI.ArkUI.Full 123 124| 名称 | 类型 | 必填 | 默认值 | 说明 | 125| ------------ | ----------------------------------- | ---- | ------ | --------------------------------------------------------- | 126| year | number | 否 | 1 | 设置日期内联型初始年份。 | 127| month | number | 否 | 1 | 设置日期内联型初始月份。 | 128| day | number | 否 | 1 | 设置日期内联型初始日。 | 129| onDateChange | (date: [DateData](#datedata))=>void | 否 | - | 当日期改变时，返回当前日期。<br/>date：当前显示的日期值。 | 130 131## DateData 132 133DateData定义Date通用属性和方法，如年、月、日。 134 135**系统能力：** SystemCapability.ArkUI.ArkUI.Full 136 137| 名称 | 类型 | 说明 | 138| ---------- | ------ | ---------------------------- | 139| year | number | 设置日期内联型初始年份。 | 140| month | number | 设置日期内联型初始月份。 | 141| day | number | 设置日期内联型初始日。 | 142| toString() | string | 以字符串格式返回当前日期值。 | 143 144## 示例 145 146### 示例1 147 148```ts 149import {CounterType, CounterComponent} from '@ohos.arkui.advanced.Counter'; 150 151@Entry 152@Component 153struct ListCounterExample { 154 build() { 155 Column() { 156 //列表型Counter 157 CounterComponent({ options: { 158 type: CounterType.LIST, 159 numberOptions: { 160 label: "价格", 161 min: 0, 162 value: 5, 163 max: 10, 164 } 165 } 166 }) 167 } 168 } 169} 170``` 171 172 173### 示例2 174```ts 175import {CounterType, CounterComponent} from '@ohos.arkui.advanced.Counter'; 176 177@Entry 178@Component 179struct CompactCounterExample { 180 build() { 181 Column() { 182 //紧凑型Counter 183 CounterComponent({ options: { 184 type: CounterType.COMPACT, 185 numberOptions: { 186 label: "数量", 187 value: 10, 188 min: 0, 189 max: 100, 190 step: 10 191 } 192 } 193 }) 194 } 195 } 196} 197``` 198 199### 示例3 200```ts 201import {CounterType, CounterComponent} from '@ohos.arkui.advanced.Counter'; 202 203@Entry 204@Component 205struct NumberStyleExample { 206 build() { 207 Column() { 208 //数值内联型Counter 209 CounterComponent({ options: { 210 type: CounterType.INLINE, 211 inlineOptions: { 212 value: 100, 213 min: 10, 214 step: 2, 215 max: 1000, 216 textWidth: 100, 217 onChange: (value: number) => { 218 console.log("onDateChange Date: " + value.toString()); 219 } 220 } } 221 }) 222 } 223 } 224} 225``` 226 227### 示例4 228```ts 229import {CounterType, CounterComponent, DateData} from '@ohos.arkui.advanced.Counter'; 230@Entry 231@Component 232struct DataStyleExample { 233 build() { 234 Column() { 235 //日期内联型counter 236 CounterComponent({ options: { 237 type: CounterType.INLINE_DATE, 238 dateOptions: { 239 year: 2016, 240 onDateChange: (date: DateData) => { 241 console.log("onDateChange Date: " + date.toString()); 242 } 243 } } 244 }) 245 } 246 } 247} 248``` 249 250
