【HarmonyOS】鸿蒙开发之Slider组件——第3.5章

组件应用场景: 设备音量大小，调节屏幕亮度等需求

slider组件内options属性简介

value：滑动条当前进度值。
min：设置滑动条设置最小值。
max：设置滑动条设置最大值，默认为 100 。
step：设置滑动条滑动跳动值，当设置相应的 step 时，Slider为间歇滑动。
style：设置滑动条的滑块样式。
direction：设置滑动条滑动方向为水平或竖直方向。
reverse：设置滑动条取值范围是否反向。

代码实例:

Slider({
          value: 10,
          min: 0,
          max: 100,
          step: 1,
          style: SliderStyle.InSet,
          direction: Axis.Horizontal,//水平方向
          reverse: false
        })
          .width(260)
          .height(60)
          .backgroundColor(Color.Yellow)
1
2
3
4
5
6
7
8
9
10
11
12

slider组件属性简介

blockColor：设置滑块的颜色。
trackColor：设置滑轨的背景颜色。
selectedColor：设置滑轨的已滑动颜色。
showSteps：设置当前是否显示步长刻度值。
showTips：设置滑动时是否显示气泡提示百分比。
trackThickness：设置滑动条粗细。

代码实例:

Slider({
          value: 10,
          min: 0,
          max: 100,
          step: 1,
          style: SliderStyle.InSet,
          direction: Axis.Horizontal,//水平方向
          reverse: false
        })
          .width(260)
          .height(60)
          .backgroundColor(Color.Orange)
          .blockColor(Color.Red)    // 设置滑块颜色
          .trackColor(Color.Pink)   // 设置滑轨颜色
          .selectedColor(Color.Red) // 设置滑轨的已滑动颜色
          .showSteps(true)          // 设置显示步长
          .showTips(true)           // 设置显示进度
          .trackThickness(5)        // 设置滚动条宽度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

slider组件事件介绍

onChange：滑动条滑动时触发事件回调，value 表示当前进度值；mode 表示滑动条的拖动状态(但是实例中无效果)，SliderChangeMode 定义了以下 3 种类型：

Begin：用户开始拖动滑块。
Moving：用户拖动滑块中。
End：用户结束拖动滑块。

代码实例:

Slider({
          value: 10,
          min: 0,
          max: 100,
          step: 1,
          style: SliderStyle.InSet,
          direction: Axis.Horizontal,//水平方向
          reverse: false
        })
          .width(260)
          .height(60)
          .backgroundColor(Color.Brown)
          .blockColor(Color.Red)    // 设置滑块颜色
          .trackColor(Color.Pink)   // 设置滑轨颜色
          .selectedColor(Color.Red) // 设置滑轨的已滑动颜色
          .showSteps(true)          // 设置显示步长
          .showTips(true)           // 设置显示进度
          .trackThickness(5)        // 设置滚动条宽度
          .onChange((value: number, mode: SliderChangeMode) => {
            console.log("当前值:"+value)
          })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

运行结果:

注意:Slider 组件支持的通用事件只有 onAppear() 和 onDisAppear() 这俩方法。

✨$踩坑不易，还希望各位大佬支持一下$

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/233180