1# ArcSlider 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @liyi0309--> 5<!--Designer: @liyi0309--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9弧形滑动条组件，通常用于在圆形屏幕的穿戴设备中快速调节设置值，如音量调节、亮度调节等应用场景。 10 11> **说明：** 12> 13> 该组件从API version 18开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14 15## 导入模块 16 17```ts 18import { 19 ArcSlider, 20 ArcSliderPosition, 21 ArcSliderOptions, 22 ArcSliderValueOptions, 23 ArcSliderLayoutOptions, 24 ArcSliderStyleOptions, 25 ArcSliderValueOptionsConstructorOptions, 26 ArcSliderLayoutOptionsConstructorOptions, 27 ArcSliderStyleOptionsConstructorOptions, 28 ArcSliderOptionsConstructorOptions 29} from '@kit.ArkUI'; 30``` 31 32## 子组件 33 34无 35 36## 属性 37 38不支持[通用属性](ts-component-general-attributes.md)。 39 40## 事件 41 42不支持[通用事件](ts-component-general-events.md)。 43 44## ArcSlider 45 46ArcSlider({ options: ArcSliderOptions }) 47 48创建ArcSlider实例，入参是弧形进度条配置选项。 49 50**装饰器类型：**@Component 51 52**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 53 54**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 55 56**参数：** 57 58| 名称 | 类型 | 必填 | 说明 | 59| ------- | ------------------------------------- | ---- | ------------------------------------------------------------ | 60| options | [ArcSliderOptions](#arcslideroptions) | 是 | 配置弧形滑动条的参数。<br/>默认值：[ArcSliderOptions](#arcslideroptions)的各项子属性均取其默认值。 | 61 62## ArcSliderOptions 63 64配置弧形Slider的信息。 65 66**装饰器类型：**@ObservedV2 67 68**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 69 70**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 71 72| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 73| -------- | -------- | -------- | -------- | -------- | 74| valueOptions | [ArcSliderValueOptions](#arcslidervalueoptions) | 否 | @Trace | 配置弧形Slider的数值信息。<br/>默认值：[ArcSliderValueOptions](#arcslidervalueoptions)的各项子属性均取其默认值。 | 75| layoutOptions | [ArcSliderLayoutOptions](#arcsliderlayoutoptions) | 否 | @Trace | 配置弧形Slider的布局信息。<br/>默认值：[ArcSliderLayoutOptions](#arcsliderlayoutoptions)的各项子属性均取其默认值。 | 76| styleOptions | [ArcSliderStyleOptions](#arcsliderstyleoptions) | 否 | @Trace | 配置弧形Slider的样式信息。<br/>默认值：[ArcSliderStyleOptions](#arcsliderstyleoptions)的各项子属性均取其默认值。 | 77| digitalCrownSensitivity | [CrownSensitivity](ts-appendix-enums.md#crownsensitivity18) | 否 | @Trace | 设置旋转表冠的灵敏度。<br/>默认值：CrownSensitivity.MEDIUM | 78| onTouch | [ArcSliderTouchHandler](#arcslidertouchhandler) | 否 | @Trace | 弧形Slider被触摸时，告知应用。<br/>默认值：不传入的情况，无回调。 | 79| onChange | [ArcSliderChangeHandler](#arcsliderchangehandler) | 否 | @Trace | 弧形Slider的进度值发生变化时，告知应用。<br/>默认值：不传入的情况，无回调。 | 80| onEnlarge | [ArcSliderEnlargeHandler](#arcsliderenlargehandler) | 否 | @Trace | 弧形Slider放大或缩小时，告知应用。<br/>默认值：不传入的情况，无回调。 | 81 82### constructor 83 84constructor(options?: ArcSliderOptionsConstructorOptions) 85 86ArcSliderOptions的构造函数。 87 88**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 89 90**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 91 92**参数：** 93 94| 参数名 | 类型 | 必填 | 说明 | 95| ------- | ------------------------------------------------------------ | ---- | ---------------------------- | 96| options | [ArcSliderOptionsConstructorOptions](#arcslideroptionsconstructoroptions) | 否 | ArcSliderOptions的构造信息。 | 97 98## ArcSliderValueOptions 99 100配置弧形Slider的数值信息。 101 102**装饰器类型：**@ObservedV2 103 104**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 105 106**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 107 108| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 109| ----- | ------ | ---- | ---------- | ------------------------------------------------------------ | 110| progress | number | 否 | @Trace | 设置当前进度值。<br />默认值：与参数min的取值一致 | 111| min | number | 否 | @Trace | 设置最小值。<br />默认值：0 | 112| max | number | 否 | @Trace | 设置最大值。<br />默认值：100<br />**说明：**<br/>当出现异常情况min >= max时，min取默认值0，max取默认值100。<br/>progress不在[min, max]范围之内，取min或者max，靠近min取min，靠近max取max。 | 113 114### constructor 115 116constructor(options?: ArcSliderValueOptionsConstructorOptions) 117 118ArcSliderValueOptions的构造函数。 119 120**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 121 122**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 123 124**参数：** 125 126| 参数名 | 类型 | 必填 | 说明 | 127| ------- | ------------------------------------------------------------ | ---- | --------------------------------- | 128| options | [ArcSliderValueOptionsConstructorOptions](#arcslidervalueoptionsconstructoroptions) | 否 | ArcSliderValueOptions的构造信息。 | 129 130## ArcSliderLayoutOptions 131 132配置弧形Slider的布局信息。 133 134**装饰器类型：**@ObservedV2 135 136**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 137 138**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 139 140| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 141| -------- | --------------------------------------- | ---- | ---------- | ------------------------------------------------------------ | 142| reverse | boolean | 否 | @Trace | 设置弧形Slider取值范围是否反向。值为false时表示从上往下滑。<br />默认值：true，表示从下往上滑动。 | 143| position | [ArcSliderPosition](#arcsliderposition) | 否 | @Trace | 弧形Slider的屏幕显示位置。<br />默认值：ArcSliderPosition.RIGHT | 144 145### constructor 146 147constructor(options?: ArcSliderLayoutOptionsConstructorOptions) 148 149ArcSliderLayoutOptions的构造函数。 150 151**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 152 153**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 154 155**参数：** 156 157| 参数名 | 类型 | 必填 | 说明 | 158| ------- | ------------------------------------------------------------ | ---- | ---------------------------------- | 159| options | [ArcSliderLayoutOptionsConstructorOptions](#arcsliderlayoutoptionsconstructoroptions) | 否 | ArcSliderLayoutOptions的构造信息。 | 160 161## ArcSliderStyleOptions 162 163配置弧形Slider的样式信息。 164 165**装饰器类型：**@ObservedV2 166 167**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 168 169**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 170 171| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 172| -------------------- | ------ | ---- | ---------- | ------------------------------------------------------------ | 173| trackThickness | number | 否 | @Trace | 正常状态下弧形Slider的描边粗细，单位：vp。<br />默认值：5<br />取值范围：[5, 16]，异常值按默认值处理。 | 174| activeTrackThickness | number | 否 | @Trace | 放大状态下弧形Slider的描边粗细，单位：vp。<br />默认值：24<br />取值范围：[24, 36]，异常值按默认值处理。 | 175| trackColor | string | 否 | @Trace | 设置描边背景色。<br />默认值：#33FFFFFF | 176| selectedColor | string | 否 | @Trace | 设置描边高亮色。<br />默认值：#FF5EA1FF | 177| trackBlur | number | 否 | @Trace | 设置描边背景模糊值，单位：vp。<br />默认值：20<br/>设置小于0的值时，按照默认值处理。 | 178 179### constructor 180 181constructor(options?: ArcSliderStyleOptionsConstructorOptions) 182 183ArcSliderStyleOptions的构造函数。 184 185**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 186 187**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 188 189**参数：** 190 191| 参数名 | 类型 | 必填 | 说明 | 192| ------- | ------------------------------------------------------------ | ---- | --------------------------------- | 193| options | [ArcSliderStyleOptionsConstructorOptions](#arcsliderstyleoptionsconstructoroptions) | 否 | ArcSliderStyleOptions的构造信息。 | 194 195## ArcSliderPosition 196 197配置弧形Slider的屏幕显示位置。 198 199**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 200 201**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 202 203| 名称 | 值 | 说明 | 204| ----- | ---- | -------------------------------- | 205| LEFT | 0 | 弧形Slider的屏幕显示位置在左侧。 | 206| RIGHT | 1 | 弧形Slider的屏幕显示位置在右侧。 | 207 208## ArcSliderTouchHandler 209 210type ArcSliderTouchHandler = (event: TouchEvent) => void 211 212弧形Slider被触摸时，告知应用。 213 214**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 215 216**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 217 218**参数：** 219 220| 参数名 | 类型 | 必填 | 说明 | 221| ------ | ------------------------------------------------------------ | ---- | -------------------- | 222| event | [TouchEvent](ts-universal-events-touch.md#touchevent对象说明) | 是 | 获得TouchEvent对象。 | 223 224## ArcSliderChangeHandler 225 226type ArcSliderChangeHandler = (progress: number) => void 227 228弧形Slider的进度值发生变化时，告知应用。 229 230**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 231 232**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 233 234**参数：** 235 236| 参数名 | 类型 | 必填 | 说明 | 237| -------- | ------ | ---- | -------------------- | 238| progress | number | 是 | Slider当前的进度值。 | 239 240## ArcSliderEnlargeHandler 241 242type ArcSliderEnlargeHandler = (isEnlarged: boolean) => void 243 244弧形Slider放大或缩小时，告知应用。 245 246**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 247 248**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 249 250**参数：** 251 252| 参数名 | 类型 | 必填 | 说明 | 253| ---------- | ------- | ---- | ------------------------------------------------------------ | 254| isEnlarged | boolean | 是 | ArcSlider当前是否放大。<br/>isEnlarged为false时，ArcSlider组件处于缩小状态。<br/>isEnlarged为true时，ArcSlider组件处于放大状态。 | 255 256## ArcSliderOptionsConstructorOptions 257 258ArcSliderOptions的构造信息。 259 260**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 261 262**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 263 264| 名称 | 类型 | 必填 | 说明 | 265| ----------------------- | ----------------------------------------------------------- | ---- | ------------------------------------------------------------ | 266| valueOptions | [ArcSliderValueOptions](#arcslidervalueoptions) | 否 | 配置弧形Slider的数值信息。<br/>默认值：[ArcSliderValueOptions](#arcslidervalueoptions)的各项子属性均取其默认值。 | 267| layoutOptions | [ArcSliderLayoutOptions](#arcsliderlayoutoptions) | 否 | 配置弧形Slider的布局信息。<br/>默认值：[ArcSliderLayoutOptions](#arcsliderlayoutoptions)的各项子属性均取其默认值。 | 268| styleOptions | [ArcSliderStyleOptions](#arcsliderstyleoptions) | 否 | 配置弧形Slider的样式信息。<br/>默认值：[ArcSliderStyleOptions](#arcsliderstyleoptions)的各项子属性均取其默认值。 | 269| digitalCrownSensitivity | [CrownSensitivity](ts-appendix-enums.md#crownsensitivity18) | 否 | 设置旋转表冠的灵敏度。<br/>默认值：CrownSensitivity.MEDIUM | 270| onTouch | [ArcSliderTouchHandler](#arcslidertouchhandler) | 否 | 弧形Slider被触摸时，告知应用。<br/>默认值：不传入的情况，无回调。 | 271| onChange | [ArcSliderChangeHandler](#arcsliderchangehandler) | 否 | 弧形Slider的进度值发生变化时，告知应用。<br/>默认值：不传入的情况，无回调。 | 272| onEnlarge | [ArcSliderEnlargeHandler](#arcsliderenlargehandler) | 否 | 弧形Slider放大或缩小时，告知应用。<br/>默认值：不传入的情况，无回调。 | 273 274## ArcSliderValueOptionsConstructorOptions 275 276ArcSliderValueOptions的构造信息。 277 278**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 279 280**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 281 282| 名称 | 类型 | 必填 | 说明 | 283| ----- | ------ | ---- | ------------------------------------------------------------ | 284| progress | number | 否 | 设置当前进度值。<br />默认值：与参数min的取值一致。 | 285| min | number | 否 | 设置最小值。<br />默认值：0 | 286| max | number | 否 | 设置最大值。<br />默认值：100<br />**说明：**<br/>当出现异常情况min >= max时，min取默认值0，max取默认值100。<br/>progress不在[min, max]范围之内，取min或者max，靠近min取min，靠近max取max。 | 287 288## ArcSliderLayoutOptionsConstructorOptions 289 290ArcSliderLayoutValueOptions的构造信息。 291 292**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 293 294**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 295 296| 名称 | 类型 | 必填 | 说明 | 297| -------- | --------------------------------------- | ---- | ------------------------------------------------------------ | 298| reverse | boolean | 否 | 设置弧形Slider取值范围是否反向。<br />默认值：true。表示从下往上滑动。 | 299| position | [ArcSliderPosition](#arcsliderposition) | 否 | 弧形Slider的屏幕显示位置。<br />默认值：ArcSliderPosition.RIGHT | 300 301## ArcSliderStyleOptionsConstructorOptions 302 303ArcSliderStyleOptions的构造信息。 304 305**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 306 307**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 308 309| 名称 | 类型 | 必填 | 说明 | 310| -------------------- | ------ | ---- | ------------------------------------------------------------ | 311| trackThickness | number | 否 | 正常状态下弧形Slider的描边粗细，单位：vp。<br />默认值：5<br />取值范围：[5, 16]，异常值按默认值处理。 | 312| activeTrackThickness | number | 否 | 放大状态下弧形Slider的描边粗细，单位：vp。<br />默认值：24<br />取值范围：[24, 36]，异常值按默认值处理。 | 313| trackColor | string | 否 | 设置描边背景色。<br />默认值：#33FFFFFF | 314| selectedColor | string | 否 | 设置描边高亮色。<br />默认值：#FF5EA1FF | 315| trackBlur | number | 否 | 设置描边背景模糊值，单位：vp。<br />默认值：20<br/>设置小于0的值时，按照默认值处理。 | 316 317## 示例 318 319从API version 18开始，该示例展示了ArcSlider组件的基本用法。 320 321```ts 322// xxx.ets 323import { 324 ArcSlider, 325 ArcSliderPosition, 326 ArcSliderOptions, 327 ArcSliderValueOptions, 328 ArcSliderLayoutOptions, 329 ArcSliderStyleOptions, 330 ArcSliderValueOptionsConstructorOptions, 331 ArcSliderLayoutOptionsConstructorOptions, 332 ArcSliderStyleOptionsConstructorOptions, 333 ArcSliderOptionsConstructorOptions 334} from '@kit.ArkUI'; 335 336@Entry 337@ComponentV2 338struct ArcSliderExample { 339 valueOptionsConstructorOptions: ArcSliderValueOptionsConstructorOptions = { 340 progress: 60, 341 min: 10, 342 max: 110 343 }; 344 345 layoutOptionsConstructorOptions: ArcSliderLayoutOptionsConstructorOptions = { 346 reverse: true, 347 position: ArcSliderPosition.RIGHT 348 }; 349 styleOptionsConstructorOptions: ArcSliderStyleOptionsConstructorOptions = { 350 trackThickness: 8, 351 activeTrackThickness: 30, 352 trackColor: '#ffd5d5d5', 353 selectedColor: '#ff2787d9', 354 trackBlur: 20 355 }; 356 valueOptions: ArcSliderValueOptions = new ArcSliderValueOptions(this.valueOptionsConstructorOptions); 357 layoutOptions: ArcSliderLayoutOptions = new ArcSliderLayoutOptions(this.layoutOptionsConstructorOptions); 358 styleOptions: ArcSliderStyleOptions = new ArcSliderStyleOptions(this.styleOptionsConstructorOptions); 359 arcSliderOptionsConstructorOptions: ArcSliderOptionsConstructorOptions = { 360 valueOptions: this.valueOptions, 361 layoutOptions: this.layoutOptions, 362 styleOptions: this.styleOptions, 363 digitalCrownSensitivity:CrownSensitivity.LOW, 364 onTouch: (event: TouchEvent) => { 365 }, 366 onChange: (progress: number) => { 367 }, 368 onEnlarge: (isEnlarged: boolean) => { 369 } 370 }; 371 arcSliderOptions: ArcSliderOptions = new ArcSliderOptions(this.arcSliderOptionsConstructorOptions); 372 373 build() { 374 Column() { 375 ArcSlider({ options: this.arcSliderOptions })} 376 .width('100%') 377 } 378} 379``` 380 381 382
