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