HarmonyOS NEXT实战：滑动条

Question

##HarmonyOS Next实战##HarmonyOS SDK应用服务##教育##

目标：实现横向和竖向滑动条

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

知识点：
SliderOptions对象属性

value：当前进度值。默认值：与参数min的取值一致。从API version 10开始，该参数支持$$双向绑定变量。取值范围： [min, max]。小于min时取min，大于max时取max。
min：设置最小值。默认值：0
max：设置最大值。默认值：100。说明：min >= max异常情况，min取默认值0，max取默认值100。value不在[min, max]范围之内，取min或者max，靠近min取min，靠近max取max。
step：设置Slider滑动步长。默认值：1。取值范围：[0.01, max - min]。说明：若设置的step值小于0或大于max值时，则按默认值显示。
style：设置Slider的滑块与滑轨显示样式。默认值：SliderStyle.OutSet
direction：设置滑动条滑动方向为水平或竖直方向。默认值：Axis.Horizontal
reverse：设置滑动条取值范围是否反向。默认值：false。值为true时，横向Slider从右往左滑动，竖向Slider从下往上滑动。值为false时，横向Slider从左往右滑动，竖向Slider从上往下滑动

组件属性

blockColor(value: ResourceColor)

设置滑块的颜色。默认值：$r('sys.color.ohos_id_color_foreground_contrary')

当滑块形状设置为SliderBlockType.DEFAULT时，blockColor可设置默认圆形滑块颜色。
当滑块形状设置为SliderBlockType.IMAGE时，滑块无填充，设置blockColor不生效。
当滑块形状设置为SliderBlockType.SHAPE时，blockColor可设置自定义形状的填充颜色。

trackColor(value: ResourceColor | LinearGradient)

设置滑轨的背景颜色。说明：设置渐变色时，若颜色断点颜色值为非法值或者渐变色断点为空时，渐变色不起效果。默认值：$r('sys.color.ohos_id_color_component_normal')。该接口中的LinearGradient类型不支持在元服务中使用。

selectedColor(value: ResourceColor)

设置滑轨的已滑动部分颜色。默认值：$r('sys.color.ohos_id_color_emphasize')

showSteps(value: boolean)

设置当前是否显示步长刻度值。值为true时显示刻度值，值为false时不显示刻度值。默认值：false

实战：SliderPage

@Entry
@Component
struct SliderPage {
  @State outSetValueOne: number = 40
  @State vInSetValueOne: number = 40

  build() {
    Column({ space: 10 }) {
      Text('Slider实战')
      Text('横向滑动条')
      Row() {
        Slider({
          value: this.outSetValueOne,
          min: 0,
          max: 100,
          style: SliderStyle.OutSet
        })
          .showTips(true)
          .onChange((value: number, mode: SliderChangeMode) => {
            this.outSetValueOne = value
            console.info('value:' + value + 'mode:' + mode.toString())
          })
        // toFixed(0)将滑动条返回值处理为整数精度
        Text(this.outSetValueOne.toFixed(0)).fontSize(12)
      }
      .width('80%')

      Text('竖向滑动条')
      Slider({
        value: this.vInSetValueOne,
        style: SliderStyle.InSet,
        direction: Axis.Vertical,
        reverse: true // 竖向的Slider默认是上端是min值，下端是max值，因此想要从下往上滑动，需要设置reverse为true
      })
        .showTips(true)
        .height(300)
        .onChange((value: number, mode: SliderChangeMode) => {
          this.vInSetValueOne = value
          console.info('value:' + value + 'mode:' + mode.toString())
        })
    }.width('100%')
  }
}