1# Slider 2 3滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景。 4 5> **说明：** 6> 7> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12无 13 14 15## 接口 16 17Slider(options?: {value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis, reverse?: boolean}) 18 19从API version 9开始，该接口支持在ArkTS卡片中使用。 20 21**参数：** 22 23| 参数名 | 参数类型 | 必填 | 参数描述 | 24| -------- | -------- | -------- | -------- | 25| value | number | 否 | 当前进度值。<br/>默认值：参数min<br />从API version 10开始，该参数支持[$$](../../quick-start/arkts-two-way-sync.md)双向绑定变量。 | 26| min | number | 否 | 设置最小值。<br/>默认值：0 | 27| max | number | 否 | 设置最大值。<br/>默认值：100<br/>**说明：** <br/>min >= max异常情况，min取默认值0，max取默认值100。<br/>value不在[min, max]范围之内，取min/max，靠近min取min，靠近max取max。 | 28| step | number | 否 | 设置Slider滑动步长。<br/>默认值：1<br/>取值范围：[0.01, max]<br/>**说明：** <br/>设置小于0或百分比的值时，按默认值显示。 | 29| style | [SliderStyle](#sliderstyle枚举说明) | 否 | 设置Slider的滑块与滑轨显示样式。<br/>默认值：SliderStyle.OutSet | 30| direction<sup>8+</sup> | [Axis](ts-appendix-enums.md#axis) | 否 | 设置滑动条滑动方向为水平或竖直方向。<br/>默认值：Axis.Horizontal | 31| reverse<sup>8+</sup> | boolean | 否 | 设置滑动条取值范围是否反向，横向Slider默认为从左往右滑动，竖向Slider默认为从上往下滑动。<br/>默认值：false | 32 33## SliderStyle枚举说明 34 35从API version 9开始，该接口支持在ArkTS卡片中使用。 36 37| 名称 | 描述 | 38| -------- | -------- | 39| OutSet | 滑块在滑轨上。 | 40| InSet | 滑块在滑轨内。 | 41 42支持除触摸热区以外的通用属性设置。 43 44| 名称 | 参数类型 | 描述 | 45| -------- | -------- | -------- | 46| blockColor | [ResourceColor](ts-types.md#resourcecolor) | 设置滑块的颜色。 <br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：** <br/>当滑块形状设置为`SliderBlockType.DEFAULT`时，`blockColor`可设置默认圆形滑块颜色；<br/>当滑块形状设置为`SliderBlockType.IMAGE`时，滑块无填充，设置`blockColor`不生效；<br/>当滑块形状设置为`SliderBlockType.SHAPE`时，`blockColor`可设置自定义形状的填充颜色。 | 47| trackColor | [ResourceColor](ts-types.md#resourcecolor) | 设置滑轨的背景颜色。 <br/>从API version 9开始，该接口支持在ArkTS卡片中使用。| 48| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | 设置滑轨的已滑动部分颜色。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 49| showSteps | boolean | 设置当前是否显示步长刻度值。<br/>默认值：false <br/>从API version 9开始，该接口支持在ArkTS卡片中使用。| 50| showTips | value: boolean,<br/>content<sup>10+</sup>?: [ResourceStr](ts-types.md#resourcestr) | value：设置滑动时是否显示气泡提示。<br/>默认值：false <br/>content：设置气泡提示的文本内容，默认显示当前百分比。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：** <br/>当direction的值为Axis.Horizontal时，tip显示在滑块正上方。值为Axis.Vertical时，tip显示在滑块正左边。<br/>tip的绘制区域为Slider自身节点的overlay。<br/>Slider不设置边距或者边距比较小时，tip会被截断。| 51| trackThickness | [Length](ts-types.md#length) | 设置滑轨的粗细。<br/>默认值：当参数style的值设置[SliderStyle](#sliderstyle枚举说明).OutSet 时为 4.0vp，[SliderStyle](#sliderstyle枚举说明).InSet时为20.0vp<br/>从APIversion9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：** <br/>设置为小于等于0的值时，按默认值显示。 | 52| blockBorderColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | 设置滑块描边颜色。<br/>**说明：** <br/>当滑块形状设置为`SliderBlockType.DEFAULT`时，`blockBorderColor`可设置默认圆形滑块描边颜色；<br/>当滑块形状设置为`SliderBlockType.IMAGE`时，滑块无描边，设置`blockBorderColor`不生效；<br/>当滑块形状设置为`SliderBlockType.SHAPE`时，`blockBorderColor`可设置自定义形状中线的颜色。 | 53| blockBorderWidth<sup>10+</sup> | [Length](ts-types.md#length) | 设置滑块描边粗细。<br/>**说明：** <br/>当滑块形状设置为`SliderBlockType.DEFAULT`时，`blockBorderWidth`可设置默认圆形滑块描边粗细；<br/>当滑块形状设置为`SliderBlockType.IMAGE`时，滑块无描边，设置`blockBorderWidth`不生效；<br/>当滑块形状设置为`SliderBlockType.SHAPE`时，`blockBorderWidth`可设置自定义形状中线的粗细。 | 54| stepColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | 设置刻度颜色。 | 55| trackBorderRadius<sup>10+</sup> | [Length](ts-types.md#length) | 设置底板圆角半径。 | 56| blockSize<sup>10+</sup> | [SizeOptions](ts-types.md#sizeoptions) | 设置滑块大小。 | 57| blockStyle<sup>10+</sup> | [SliderBlockStyle](#sliderblockstyle10) | 设置滑块形状参数。 | 58| stepSize<sup>10+</sup> | [Length](ts-types.md#length) | 设置刻度大小（直径）。 | 59 60## SliderBlockStyle<sup>10+</sup>对象说明 61 62Slider组件滑块形状参数。 63 64| 名称 | 类型 | 必填 | 说明 | 65| ----- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 66| type | [SliderBlockType](#sliderblocktype10) | 是 | 设置滑块形状。<br/>默认值：SliderBlockType.DEFAULT，使用圆形滑块。 | 67| image | [ResourceStr](ts-types.md#resourcestr) | 否 | 设置滑块图片资源。<br />图片显示区域大小由blockSize属性控制，请勿输入尺寸过大的图片。 | 68| shape | [Circle](ts-drawing-components-circle.md) \| [Ellipse](ts-drawing-components-ellipse.md) \| [Path](ts-drawing-components-path.md) \| [Rect](ts-drawing-components-rect.md) | 否 | 设置滑块使用的自定义形状。 | 69 70## SliderBlockType<sup>10+</sup>枚举说明 71 72Slider组件滑块形状枚举。 73 74| 名称 | 描述 | 75| ------- | ---------------------- | 76| DEFAULT | 使用默认滑块（圆形）。 | 77| IMAGE | 使用图片资源作为滑块。 | 78| SHAPE | 使用自定义形状作为滑块。 | 79 80## 事件 81 82支持[通用事件](ts-universal-events-click.md)外，还支持以下事件： 83 84| 名称 | 功能描述 | 85| -------- | -------- | 86| onChange(callback: (value: number, mode: SliderChangeMode) => void) | Slider拖动或点击时触发事件回调。<br/>value：当前滑动进度值。若返回值有小数，可使用number.toFixed()方法将数据处理为预期的精度。<br/>mode：事件触发的相关状态值。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：** <br/>Begin和End状态当手势点击时都会触发，Moving和Click状态当value值发生变化时触发。<br/>当连贯动作为拖动动作时，不触发Click状态。<br/>value值的变化范围为对应步长steps数组。 | 87 88## SliderChangeMode枚举说明 89 90从API version 9开始，该接口支持在ArkTS卡片中使用。 91 92| 名称 | 值 | 描述 | 93| -------- | -------- | -------- | 94| Begin | 0 | 手势/鼠标接触或者按下滑块。 | 95| Moving | 1 | 正在拖动滑块过程中。 | 96| End | 2 | 手势/鼠标离开滑块。 | 97| Click | 3 | 点击滑动条使滑块位置移动。 | 98 99## 示例 100 101### 示例1 102 103```ts 104// xxx.ets 105@Entry 106@Component 107struct SliderExample { 108 @State outSetValueOne: number = 40 109 @State inSetValueOne: number = 40 110 @State outSetValueTwo: number = 40 111 @State inSetValueTwo: number = 40 112 @State vOutSetValueOne: number = 40 113 @State vInSetValueOne: number = 40 114 @State vOutSetValueTwo: number = 40 115 @State vInSetValueTwo: number = 40 116 117 build() { 118 Column({ space: 8 }) { 119 Text('outset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15) 120 Row() { 121 Slider({ 122 value: this.outSetValueOne, 123 min: 0, 124 max: 100, 125 style: SliderStyle.OutSet 126 }) 127 .showTips(true) 128 .onChange((value: number, mode: SliderChangeMode) => { 129 this.outSetValueOne = value 130 console.info('value:' + value + 'mode:' + mode.toString()) 131 }) 132 // toFixed(0)将滑动条返回值处理为整数精度 133 Text(this.outSetValueOne.toFixed(0)).fontSize(12) 134 } 135 .width('80%') 136 Row() { 137 Slider({ 138 value: this.outSetValueTwo, 139 step: 10, 140 style: SliderStyle.OutSet 141 }) 142 .showSteps(true) 143 .onChange((value: number, mode: SliderChangeMode) => { 144 this.outSetValueTwo = value 145 console.info('value:' + value + 'mode:' + mode.toString()) 146 }) 147 Text(this.outSetValueTwo.toFixed(0)).fontSize(12) 148 } 149 .width('80%') 150 151 Text('inset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15) 152 Row() { 153 Slider({ 154 value: this.inSetValueOne, 155 min: 0, 156 max: 100, 157 style: SliderStyle.InSet 158 }) 159 .blockColor('#191970') 160 .trackColor('#ADD8E6') 161 .selectedColor('#4169E1') 162 .showTips(true) 163 .onChange((value: number, mode: SliderChangeMode) => { 164 this.inSetValueOne = value 165 console.info('value:' + value + 'mode:' + mode.toString()) 166 }) 167 Text(this.inSetValueOne.toFixed(0)).fontSize(12) 168 } 169 .width('80%') 170 Row() { 171 Slider({ 172 value: this.inSetValueTwo, 173 step: 10, 174 style: SliderStyle.InSet 175 }) 176 .blockColor('#191970') 177 .trackColor('#ADD8E6') 178 .selectedColor('#4169E1') 179 .showSteps(true) 180 .onChange((value: number, mode: SliderChangeMode) => { 181 this.inSetValueTwo = value 182 console.info('value:' + value + 'mode:' + mode.toString()) 183 }) 184 Text(this.inSetValueTwo.toFixed(0)).fontSize(12) 185 } 186 .width('80%') 187 188 Row() { 189 Column() { 190 Text('vertical outset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15) 191 Row() { 192 Slider({ 193 value: this.vOutSetValueOne, 194 style: SliderStyle.OutSet, 195 direction: Axis.Vertical 196 }) 197 .blockColor('#191970') 198 .trackColor('#ADD8E6') 199 .selectedColor('#4169E1') 200 .showTips(true) 201 .onChange((value: number, mode: SliderChangeMode) => { 202 this.vOutSetValueOne = value 203 console.info('value:' + value + 'mode:' + mode.toString()) 204 }) 205 Slider({ 206 value: this.vOutSetValueTwo, 207 step: 10, 208 style: SliderStyle.OutSet, 209 direction: Axis.Vertical 210 }) 211 .blockColor('#191970') 212 .trackColor('#ADD8E6') 213 .selectedColor('#4169E1') 214 .showSteps(true) 215 .onChange((value: number, mode: SliderChangeMode) => { 216 this.vOutSetValueTwo = value 217 console.info('value:' + value + 'mode:' + mode.toString()) 218 }) 219 } 220 }.width('50%').height(300) 221 222 Column() { 223 Text('vertical inset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15) 224 Row() { 225 Slider({ 226 value: this.vInSetValueOne, 227 style: SliderStyle.InSet, 228 direction: Axis.Vertical, 229 reverse: true // 竖向的Slider默认是上端是min值，下端是max值，因此想要从下往上滑动，需要设置reverse为true 230 }) 231 .showTips(true) 232 .onChange((value: number, mode: SliderChangeMode) => { 233 this.vInSetValueOne = value 234 console.info('value:' + value + 'mode:' + mode.toString()) 235 }) 236 Slider({ 237 value: this.vInSetValueTwo, 238 step: 10, 239 style: SliderStyle.InSet, 240 direction: Axis.Vertical, 241 reverse: true 242 }) 243 .showSteps(true) 244 .onChange((value: number, mode: SliderChangeMode) => { 245 this.vInSetValueTwo = value 246 console.info('value:' + value + 'mode:' + mode.toString()) 247 }) 248 } 249 }.width('50%').height(300) 250 } 251 }.width('100%') 252 } 253} 254``` 255 256 257 258### 示例2 259 260```ts 261@Entry 262@Component 263struct SliderExample { 264 @State tipsValue: number = 40 265 266 build() { 267 Column({ space: 8 }) { 268 Text('block').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 269 Slider({ style: SliderStyle.OutSet, value: 40 }) 270 .blockSize({ width: 40, height: 40 }) 271 .blockBorderColor(Color.Red) 272 .blockBorderWidth(5) 273 Divider() 274 Text('step').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 275 Slider({ style: SliderStyle.InSet, value: 40, step: 10 }) 276 .showSteps(true) 277 .stepSize(8) 278 .stepColor(Color.Yellow) 279 Divider() 280 Text('track').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 281 Slider({ style: SliderStyle.InSet, value: 40 }) 282 .trackBorderRadius(2) 283 Divider() 284 Text('blockStyle').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 285 Slider({ style: SliderStyle.OutSet, value: 40 }) 286 .blockStyle({ type: SliderBlockType.DEFAULT }) 287 Slider({ style: SliderStyle.OutSet, value: 40 }) 288 .blockStyle({ type: SliderBlockType.IMAGE, image: $r('sys.media.ohos_app_icon') }) 289 Slider({ style: SliderStyle.OutSet, value: 40 }) 290 .blockSize({ width: '60px', height: '60px' }) 291 .blockColor(Color.Red) 292 .blockStyle({ type: SliderBlockType.SHAPE, shape: new Path({ commands: 'M60 60 M30 30 L15 56 L45 56 Z' }) }) 293 Divider() 294 Text('tips').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 295 Slider({ style: SliderStyle.InSet, value: this.tipsValue }) 296 .showTips(true, 'value:' + this.tipsValue.toFixed()) 297 .onChange(value => { 298 this.tipsValue = value 299 }) 300 } 301 } 302} 303``` 304 305
