codecamp

滑动条组件

滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景。

说明

该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

无

接口

Slider(options?: {value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis, reverse?: boolean})

从API version 9开始，该接口支持在ArkTS卡片中使用。

参数：

参数名

参数类型

必填

参数描述

value

number

否

当前进度值。

默认值：参数min

min

number

否

设置最小值。

默认值：0

max

number

否

设置最大值。

默认值：100

说明：

min >= max异常情况，min取默认值0，max取默认值100。

value不在[min, max]范围之内，取min/max，靠近min取min，靠近max取max。

step

number

否

设置Slider滑动步长。

默认值：1

取值范围：[0.01, max]

说明：

设置小于0或百分比的值时，按默认值显示。

style

SliderStyle

否

设置Slider的滑块与滑轨显示样式。

默认值：SliderStyle.OutSet

direction8+

Axis

否

设置滑动条滑动方向为水平或竖直方向。

默认值：Axis.Horizontal

reverse8+

boolean

否

设置滑动条取值范围是否反向，横向Slider默认为从左往右滑动，竖向Slider默认为从上往下滑动。

默认值：false

SliderStyle枚举说明

从API version 9开始，该接口支持在ArkTS卡片中使用。

名称

描述

OutSet

滑块在滑轨上。

InSet

滑块在滑轨内。

属性

支持除触摸热区以外的通用属性设置。

名称

参数类型

描述

blockColor

ResourceColor

设置滑块的颜色。

从API version 9开始，该接口支持在ArkTS卡片中使用。

trackColor

ResourceColor

设置滑轨的背景颜色。

从API version 9开始，该接口支持在ArkTS卡片中使用。

selectedColor

ResourceColor

设置滑轨的已滑动部分颜色。

从API version 9开始，该接口支持在ArkTS卡片中使用。

showSteps

boolean

设置当前是否显示步长刻度值。

默认值：false

从API version 9开始，该接口支持在ArkTS卡片中使用。

showTips

boolean

设置滑动时是否显示百分比气泡提示。

默认值：false

从API version 9开始，该接口支持在ArkTS卡片中使用。

说明：

当direction的属性值为Axis.Horizontal时，tip显示在滑块正上方。值为Axis.Vertical时，tip显示在滑块正左边。

tip的绘制区域为Slider自身节点的overlay。

Slider不设置边距，或者边距比较小时，tip会被截断。

trackThickness

Length

设置滑轨的粗细。

默认值：当参数style的值设置SliderStyle.OutSet 时为 4.0vp，SliderStyle.InSet时为20.0vp。

从APIversion9开始，该接口支持在ArkTS卡片中使用。

说明：

设置为小于0的值时，按默认值显示。

事件

通用事件仅支持挂载卸载事件：OnAppear，OnDisAppear。

名称

功能描述

onChange(callback: (value: number, mode: SliderChangeMode) => void)

Slider滑动时触发事件回调。

value：当前滑动进度值。若返回值有小数，可使用number.toFixed()方法将数据处理为预期的精度。

mode：拖动状态。

从API version 9开始，该接口支持在ArkTS卡片中使用。

说明：Begin和End状态当手势点击时都会触发，Moving和Click状态当value值发生变换时触发。

当连贯动作为拖动动作时，不触发Click状态。

value值的变化范围为对应步长steps数组。

SliderChangeMode枚举说明

从API version 9开始，该接口支持在ArkTS卡片中使用。

名称

值

描述

Begin

0

手势/鼠标接触或者按下滑块。

Moving

1

正在拖动滑块过程中。

End

2

手势/鼠标离开滑块。

Click

3

点击滑动条使滑块位置移动。

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct SliderExample {
  5.   @State outSetValueOne: number = 40
  6.   @State inSetValueOne: number = 40
  7.   @State outSetValueTwo: number = 40
  8.   @State inSetValueTwo: number = 40
  9.   @State vOutSetValueOne: number = 40
  10.   @State vInSetValueOne: number = 40
  11.   @State vOutSetValueTwo: number = 40
  12.   @State vInSetValueTwo: number = 40
  13. 

  14.   build() {
  15.     Column({ space: 8 }) {
  16.       Text('outset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15)
  17.       Row() {
  18.         Slider({
  19.           value: this.outSetValueOne,
  20.           min: 0,
  21.           max: 100,
  22.           style: SliderStyle.OutSet
  23.         })
  24.           .showTips(true)
  25.           .onChange((value: number, mode: SliderChangeMode) => {
  26.             this.outSetValueOne = value
  27.             console.info('value:' + value + 'mode:' + mode.toString())
  28.           })
  29.         // toFixed(0)将滑动条返回值处理为整数精度
  30.         Text(this.outSetValueOne.toFixed(0)).fontSize(12)
  31.       }
  32.       .width('80%')
  33.       Row() {
  34.         Slider({
  35.           value: this.outSetValueTwo,
  36.           step: 10,
  37.           style: SliderStyle.OutSet
  38.         })
  39.           .showSteps(true)
  40.           .onChange((value: number, mode: SliderChangeMode) => {
  41.             this.outSetValueTwo = value
  42.             console.info('value:' + value + 'mode:' + mode.toString())
  43.           })
  44.         Text(this.outSetValueTwo.toFixed(0)).fontSize(12)
  45.       }
  46.       .width('80%')
  47. 

  48.       Text('inset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15)
  49.       Row() {
  50.         Slider({
  51.           value: this.inSetValueOne,
  52.           min: 0,
  53.           max: 100,
  54.           style: SliderStyle.InSet
  55.         })
  56.           .blockColor('#191970')
  57.           .trackColor('#ADD8E6')
  58.           .selectedColor('#4169E1')
  59.           .showTips(true)
  60.           .onChange((value: number, mode: SliderChangeMode) => {
  61.             this.inSetValueOne = value
  62.             console.info('value:' + value + 'mode:' + mode.toString())
  63.           })
  64.         Text(this.inSetValueOne.toFixed(0)).fontSize(12)
  65.       }
  66.       .width('80%')
  67.       Row() {
  68.         Slider({
  69.           value: this.inSetValueTwo,
  70.           step: 10,
  71.           style: SliderStyle.InSet
  72.         })
  73.           .blockColor('#191970')
  74.           .trackColor('#ADD8E6')
  75.           .selectedColor('#4169E1')
  76.           .showSteps(true)
  77.           .onChange((value: number, mode: SliderChangeMode) => {
  78.             this.inSetValueTwo = value
  79.             console.info('value:' + value + 'mode:' + mode.toString())
  80.           })
  81.         Text(this.inSetValueTwo.toFixed(0)).fontSize(12)
  82.       }
  83.       .width('80%')
  84. 

  85.       Row() {
  86.         Column() {
  87.           Text('vertical outset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15)
  88.           Row() {
  89.             Slider({
  90.               value: this.vOutSetValueOne,
  91.               style: SliderStyle.OutSet,
  92.               direction: Axis.Vertical
  93.             })
  94.               .blockColor('#191970')
  95.               .trackColor('#ADD8E6')
  96.               .selectedColor('#4169E1')
  97.               .showTips(true)
  98.               .onChange((value: number, mode: SliderChangeMode) => {
  99.                 this.vOutSetValueOne = value
  100.                 console.info('value:' + value + 'mode:' + mode.toString())
  101.               })
  102.             Slider({
  103.               value: this.vOutSetValueTwo,
  104.               step: 10,
  105.               style: SliderStyle.OutSet,
  106.               direction: Axis.Vertical
  107.             })
  108.               .blockColor('#191970')
  109.               .trackColor('#ADD8E6')
  110.               .selectedColor('#4169E1')
  111.               .showSteps(true)
  112.               .onChange((value: number, mode: SliderChangeMode) => {
  113.                 this.vOutSetValueTwo = value
  114.                 console.info('value:' + value + 'mode:' + mode.toString())
  115.               })
  116.           }
  117.         }.width('50%').height(300)
  118. 

  119.         Column() {
  120.           Text('vertical inset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15)
  121.           Row() {
  122.             Slider({
  123.               value: this.vInSetValueOne,
  124.               style: SliderStyle.InSet,
  125.               direction: Axis.Vertical,
  126.               reverse: true // 竖向的Slider默认是上端是min值，下端是max值，因此想要从下往上滑动，需要设置reverse为true
  127.             })
  128.               .showTips(true)
  129.               .onChange((value: number, mode: SliderChangeMode) => {
  130.                 this.vInSetValueOne = value
  131.                 console.info('value:' + value + 'mode:' + mode.toString())
  132.               })
  133.             Slider({
  134.               value: this.vInSetValueTwo,
  135.               step: 10,
  136.               style: SliderStyle.InSet,
  137.               direction: Axis.Vertical,
  138.               reverse: true
  139.             })
  140.               .showSteps(true)
  141.               .onChange((value: number, mode: SliderChangeMode) => {
  142.                 this.vInSetValueTwo = value
  143.                 console.info('value:' + value + 'mode:' + mode.toString())
  144.               })
  145.           }
  146.         }.width('50%').height(300)
  147.       }
  148.     }.width('100%')
  149.   }
  150. }

下拉选择菜单
Text组件的子组件
温馨提示
下载编程狮App，免费阅读超1000+编程语言教程
取消
确定
目录

通用事件

通用属性

手势处理

基础组件

容器组件

媒体组件

绘制组件

画布组件

动画

弹窗

生命周期

状态管理

像素

枚举

类型

接口

错误码合集

关闭

 MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }