第九节HarmonyOS 常用基础组件29-Slider

1、描述

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

2、接口

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

3、参数

参数名	参数类型	必填	描述
value	number	否	当前进度值。默认值0。
min	number	否	设置最小值。默认值0。
max	number	否	设置最大值。默认值100。说明：1、min > max异常情况时，min取默认值0，max取默认值100。2、value不在[min，max]范围之内时，取min/max，靠近min取min，靠近max取max。
step	number	否	设置Slider滑动的步长。默认值1；取值范围[0.01, max]。说明：设置小于0或百分比的值时，按默认值显示。
style	SliderStyle	否	设置Slider的滑块与滑轨显示样式。默认值：SliderStyle.OutSet。
direction	Axis	否	设置滑动条滑动方向为水平或者竖直方向。默认值：Axis.Horizontal。
reverse	boolean	否	设置滑动条取值范围是否取反，横向Slider默认为从左往右滑动，竖直Slider默认为从上往下滑动。

4、SliderStyle枚举说明：

名称	描述
OutSet	滑块在滑轨上。
InSet	滑块在滑轨内。

5、属性

名称	参数类型	描述
blockColor	ResourceColor	设置滑块的颜色。
trackColor	ResourceColor	设置滑轨的背景颜色。
selectedColor	ResourceColor	设置滑轨的已滑动部分的颜色。
showSteps	boolean	设置当前是否显示步长的刻度值。默认值：false。
showTips	boolean	设置滑动时是否显示百分比气泡提示。默认值：false。说明：1、当direction的属性值为Axis.Horizontal时，tip显示在滑块正上方。值为Axis.Vertical时，tip显示在滑块正左边。2、tip的绘制区域为Slider自身节点的overlay。3、Slider不设置边距或者边距较小时，tip会被截断。
trackThickness	Length	设置滑轨的粗细。默认值：当参数style的值设置为SilderStyle.OutSet时为4.0vp，SliderStyle.InSet时为20.0vp。 说明：设置为小于0的值时，按默认值显示。

6、事件

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

功能描述：Slider滑动时触发事件回调。value：当前滑动进度值。若返回值有小数，可使用number.toFixed()方法将数据处理为预期的精度。mode：拖动状态（说明：1、Begin和End状态当手势点击时会触发，Moving和Click状态当value值发生变换时触发。2、当连贯动作为拖动动作时，不触发Click状态。3、value值的变化范围为对应步长steps数组。）。

7、SliderChangeMode枚举说明：

名称	值	描述
Begin	0	手势/鼠标接触或者按下滑块。
Moving	1	正在拖动滑块过程中。
End	2	手势/鼠标离开滑块。
Click	3	点击滑动条使滑块位置移动。

8、示例

import router from '@ohos.router'

@Entry
@Component
struct SliderPage {
  @State message: string = '滑动条组件，通常用于快速调节设置值，如音量调节，亮度调节等应用场景。'
  @State value1: number = 0;
  @State value2: number = 0;
  @State value3: number = 0;
  @State value4: number = 2;
  @State value5: number = 0;

  build() {
    Row() {
      Scroll() {
        Column() {
          Text(this.message)
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
            .width("96%")

          Blank(12)
          Text(this.value1.toString())
          Slider().width("96%")
            .onChange((value: number, mode: SliderChangeMode) => {
              this.value1 = value;
            })

          Blank(12)
          Text(this.value2.toString())
          Slider().width("96%").showTips(true)
            .onChange((value: number, mode: SliderChangeMode) => {
              this.value2 = value;
            })

          Blank(12)
          Text(this.value3.toString())
          Slider({max:10}).width("96%").showSteps(true)
            .onChange((value: number, mode: SliderChangeMode) => {
              this.value3 = value;
            })

          Blank(12)
          Text(this.value4.toString())
          Slider({
            value: 2,
            min: 0,
            max: 10,
            step: 2,
            style: SliderStyle.InSet
          }).width("96%")
            .onChange((value: number, mode: SliderChangeMode) => {
              this.value4 = value;
            })

          Blank(12)
          Text(this.value5.toString())
          Slider({
            value: 0,
            min: 0,
            max: 10,
            style: SliderStyle.InSet
          })
            .width("96%")
            .blockColor(Color.Red)
            .trackColor(Color.Yellow)
            .selectedColor(Color.Green)
            .onChange((value: number, mode: SliderChangeMode) => {
              this.value5 = value;
            })

          Blank(12)
          Slider({
            value: 2,
            min: 0,
            max: 10,
            step: 2,
            style: SliderStyle.InSet,
            reverse:true // 倒滑
          }).width("96%").trackThickness(50)

          Blank(12)
          Slider({
            value: 2,
            min: 0,
            max: 10,
            step: 2,
            style: SliderStyle.InSet,
            direction:Axis.Vertical
          }).height(100)

          Button("Slider文本文档")
            .fontSize(20)
            .backgroundColor('#007DFF')
            .width('96%')
            .onClick(() => {
              // 处理点击事件逻辑
              router.pushUrl({
                url: "pages/baseComponent/slider/SliderDesc",
              })
            })
            .margin({ top: 20 })

        }
        .width('100%')
      }
    }
    .padding({ top: 12, bottom: 12 })
  }
}

9、效果图