HarmonyOS NEXT鸿蒙开发：Slider滑动组件

作者：马育民 • • 阅读：10054

介绍

官网API

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

接口

Slider(options?: SliderOptions)
参数
  • options：类型：SliderOptions，配置滑动条的参数。

SliderOptions对象说明

  • value：类型：number，当前进度值。默认值：与参数 min 的取值一致。

  • min：类型：number，设置最小值。默认值：0

  • max：类型：number，设置最大值。默认值：100

  • step：类型：number，设置Slider滑动步长。默认值：1，取值范围：[0.01, max - min]

  • style：类型：SliderStyle，设置Slider的滑块与滑轨显示样式。默认值：SliderStyle.OutSet

  • direction：类型：Axis，设置滑动条滑动方向为水平或竖直方向。默认值：Axis.Horizontal横向，Axis.Vertical 纵向

  • reverse：类型：boolean，设置滑动条取值范围是否反向，横向Slider默认为从左往右滑动，竖向Slider默认为从上往下滑动。默认值：false

SliderStyle枚举说明

  • OutSet：滑块在滑轨上。

  • InSet：滑块在滑轨内。

  • NONE：无滑块

方法

滑动时显示气泡提示

showTips(value: boolean, content?: ResourceStr)
参数

  • value：类型：boolean，必填，滑动时是否显示气泡提示。默认值：false

  • content：类型：ResourceStr，气泡提示的文本内容，默认显示当前百分比。

例子

Slider(  {
  value: 100,
})
  .showTips(true)

设置滑轨的粗细

设置滑轨的粗细。设置为小于等于0的值时，取默认值。

trackThickness(value: Length)
参数
  • value：类型：Length，必填，滑轨的粗细。默认值：当参数style的值设置 SliderStyle.OutSet 时为 4.0vp，SliderStyle.InSet 时为 20.0vp。

滑轨的已滑动部分颜色

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

selectedColor(value: ResourceColor)
参数
  • value：类型：ResourceColor，必填，滑轨的已滑动部分颜色。默认值：$r('sys.color.ohos_id_color_emphasize')

例子

Slider(  {
  value: 100,
})
  .selectedColor($r("#ffff00"))

其他方法

详见官网

事件

拖动或点击时触发事件回调

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

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

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

  • callback: (value: number, mode: SliderChangeMode) => void 回调函数

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

    • mode：类型：SliderChangeMode，事件触发的相关状态值。

SliderChangeMode枚举说明

  • Begin：值：0，表示手势/鼠标接触或者按下滑块。
  • Moving：值：1，表示正在拖动滑块过程中。
  • End：值：2，表示手势/鼠标离开滑块。

例子

Slider({
  value: 100,
  style: SliderStyle.NONE
})
  .width('70%')
  .selectedColor('#3482ff')
  .trackThickness(20)
  .showTips(true)
  .onChange( (value:number)=>{
      console.log("value:",value)
  })

原文出处：/show_1GW3c6aRvB6.html

吉ICP备15003043号