鸿蒙Next滑动条Slider详细总结一文了解

音视频播放进度，亮度调节等快速调节设置值的场景通常需要使用到进度条组件

本文列举了Slider所有属性介绍和使用，详细看代码注释和操作按键，即可了解每个属性的功能。

看一下效果图，简单介绍一下：

可以复制全部代码，本地自己运行看一下效果

使用说明：

1.使用Slider需要配置基本属性SliderOptions,全局定义，可以动态修改，直观看到变化

//默认值：与参数min的取值一致。从API version 10开始，该参数支持$$双向绑定变量。
//取值范围： [min, max]小于min时取min，大于max时取max
  @Local value:number =0 //当前进度值
  @Local min:number =0   //设置最小值
  @Local max:number =100 //最大值
  @Local step:number =1 //滑动步长 取值范围：[0.01, max - min]
  @Local style:SliderStyle = SliderStyle.OutSet //滑块在滑轨上  InSet 滑块在滑轨内 NONE 无滑块
  @Local _direction:Axis = Axis.Horizontal
  @Local reverse:boolean =false //滑动条取值范围是否反向

2.滑轨滑块的属性配置,全局定义，可以动态修改，直观看到变化，属性说明下面使用有注释

  @Local blockColor: ResourceColor = this.bgColors[3]//设置滑块的颜色
  @Local trackColor: ResourceColor | LinearGradient = this.linearColor//滑轨的背景颜色 支持渐变色
  @Local selectedColor: ResourceColor = this.bgColors[0]//设置滑轨的已滑动部分颜色
  @Local blockBorderColor: ResourceColor = this.bgColors[3]//滑块描边颜色
  @Local stepColor: ResourceColor = getRandomColor()//设置刻度颜色
  @Local showSteps: boolean = false// 是否显示步长刻度值
  @Local showTips: boolean = false//是否显示气泡提示
  @Local trackThickness: number = 20//设置滑轨的粗细
  @Local blockBorderWidth: number = 1//滑块描边粗细
  @Local trackBorderRadius: number = 1//底板圆角半径
  @Local selectedBorderRadius: number = 1//已滑动部分（高亮）圆角半径
  @Local blockwidth: number = 24//设置滑块大小
  @Local blockheight: number = 24//设置滑块大小
  @Local stepSize: number = 4//设置刻度大小（直径）
  @Local minResponsiveDistance: number = 1//滑动响应的最小距离
  @Local blockStyle: SliderBlockStyle = { type: SliderBlockType.DEFAULT }//滑块形状参数
  @Local sliderInteractionMode: SliderInteraction = SliderInteraction.SLIDE_AND_CLICK//用户与滑动条组件交互方式

全部代码：

@Entry
@ComponentV2
struct SliderTest{
  bgColors:string[]=["#ff00dd","#00ff99","#95ff00","#0099ff"]
  public linearColor: LinearGradient = new LinearGradient([{ color: "#FF67F9D4", offset: 0 }, { color: "#FFFF9554", offset: 1 }])

  @Local value:number =0 //当前进度值
  @Local min:number =0   //设置最小值
  @Local max:number =100 //最大值
  @Local step:number =1 //滑动步长 取值范围：[0.01, max - min]
  @Local style:SliderStyle = SliderStyle.OutSet //滑块在滑轨上  InSet 滑块在滑轨内 NONE 无滑块
  @Local _direction:Axis = Axis.Horizontal
  @Local reverse:boolean =false //滑动条取值范围是否反向

  @Local blockColor:ResourceColor =this.bgColors[3]
  @Local trackColor:ResourceColor| LinearGradient =this.linearColor
  @Local selectedColor:ResourceColor =this.bgColors[0]
  @Local blockBorderColor:ResourceColor =this.bgColors[3]
  @Local stepColor:ResourceColor =getRandomColor()
  @Local showSteps:boolean = false
  @Local showTips:boolean = false
  @Local trackThickness:number = 10
  @Local blockBorderWidth:number = 1
  @Local trackBorderRadius:number = 1
  @Local selectedBorderRadius:number = 1
  @Local blockwidth:number = 12
  @Local blockheight:number = 12
  @Local stepSize:number = 4
  @Local minResponsiveDistance:number = 1
  @Local blockStyle:SliderBlockStyle = {type:SliderBlockType.DEFAULT}
  @Local sliderInteractionMode:SliderInteraction = SliderInteraction.SLIDE_AND_CLICK
  build() {

    Column({space:10}){
      Slider({
        value:this.value,
        min:this.min,
        max:this.max,
        step:this.step,
        style:this.style,
        direction:this._direction,
        reverse:this.reverse
      })
        .blockColor(this.blockColor) //设置滑块的颜色
        .trackColor(this.trackColor) //滑轨的背景颜色 支持渐变色
        .selectedColor(this.selectedColor) //设置滑轨的已滑动部分颜色
        .showSteps(this.showSteps) // 是否显示步长刻度值
        .showTips(this.showTips)  //是否显示气泡提示
        .trackThickness(this.trackThickness) //设置滑轨的粗细
        .blockBorderColor(this.blockBorderColor) //滑块描边颜色
        .blockBorderWidth(this.blockBorderWidth) //滑块描边粗细
        .stepColor(this.stepColor) //设置刻度颜色
        .trackBorderRadius(this.trackBorderRadius) //底板圆角半径
        .selectedBorderRadius(this.selectedBorderRadius) //已滑动部分（高亮）圆角半径
        .blockSize({width:this.blockwidth,height:this.blockheight}) //设置滑块大小
        .blockStyle(this.blockStyle) //滑块形状参数
        .stepSize(this.stepSize) //设置刻度大小（直径）
        .sliderInteractionMode(this.sliderInteractionMode) //用户与滑动条组件交互方式
        .minResponsiveDistance(this.minResponsiveDistance) //滑动响应的最小距离
        .onChange((value: number, mode: SliderChangeMode) => {
          this.value = value //当前滑动进度值，变化范围为对应步长steps数组
        })
      Text('SliderOptions配置')
      Row({space:10}){
        Column(){
          Text("最小值")
          Counter() {
            Text(this.min.toString())
          }
          .onInc(() => {
            this.min+=10;
          })
          .onDec(() => {
            if (this.min>10) {
              this.min-=10;
            }
          })
        }
        Column(){
          Text("最大值")
          Counter() {
            Text(this.max.toString())
          }
          .onInc(() => {
            this.max+=10;
          })
          .onDec(() => {
            this.max-=10;
          })
        }

        Column(){
          Text("步长")
          Counter() {
            Text(this.step.toString())
          }
          .onInc(() => {
            this.step++;
          })
          .onDec(() => {
            if (this.step>0) {
              this.step--;
            }
          })
        }
      }
      Text('滑块位置:')
      Row({space:10}){
        Button('在滑轨上').onClick(()=>{
          this.style =SliderStyle.OutSet
        })
        Button('在滑轨内').onClick(()=>{
          this.style =SliderStyle.InSet
        })
        Button('无滑块').onClick(()=>{
          this.style =SliderStyle.NONE
        })
      }
      Button('是否反向').onClick(()=>{
        this.reverse =!this.reverse
      })
      Text('修改属性设置')
      Row({space:10}){
        Button('滑块颜色').onClick(()=>{
          this.blockColor = getRandomColor()
        })
        Button('滑轨背景色').onClick(()=>{
          this.trackColor = getRandomColor()
        })
        Button('已滑颜色').onClick(()=>{
          this.selectedColor = getRandomColor()
        })
      }
      Row({space:10}){
        Button('是否显示步长刻度值').onClick(()=>{
          this.showSteps = !this.showSteps
        })
        Button('是否显示气泡提示').onClick(()=>{
          this.showTips = !this.showTips
        })
      }
      Row({space:10}){
        Button('滑块描边颜色').onClick(()=>{
          this.blockBorderColor =getRandomColor()
        })
        Button('刻度颜色').onClick(()=>{
          this.stepColor =getRandomColor()
        })
      }

      Row({space:10}){
        Column(){
          Text("设置滑轨的粗细")
          Counter() {
            Text(this.trackThickness.toString())
          }
          .onInc(() => {
            this.trackThickness+=2;
          })
          .onDec(() => {
            if (this.trackThickness>2) {
              this.trackThickness-=2;
            }
          })
        }
        Column(){
          Text("滑块描边粗细")
          Counter() {
            Text(this.blockBorderWidth.toString())
          }
          .onInc(() => {
            this.blockBorderWidth+=2;
          })
          .onDec(() => {
            if (this.trackThickness>2) {
              this.blockBorderWidth-=2;
            }
          })
        }
      }
      Row({space:10}){
        Column(){
          Text("底板圆角半径")
          Counter() {
            Text(this.trackBorderRadius.toString())
          }
          .onInc(() => {
            this.trackBorderRadius+=2;
          })
          .onDec(() => {
            if (this.trackBorderRadius>2) {
              this.trackBorderRadius-=2;
            }
          })
        }
        Column(){
          Text("已滑动部分圆角半径")
          Counter() {
            Text(this.selectedBorderRadius.toString())
          }
          .onInc(() => {
            this.selectedBorderRadius+=2;
          })
          .onDec(() => {
            if (this.selectedBorderRadius>2) {
              this.selectedBorderRadius-=2;
            }
          })
        }
      }
      Row({space:10}){
        Column(){
          Text("滑块宽")
          Counter() {
            Text(this.blockwidth.toString())
          }
          .onInc(() => {
            this.blockwidth+=2;
          })
          .onDec(() => {
            if (this.blockwidth>2) {
              this.blockwidth-=2;
            }
          })
        }
        Column(){
          Text("滑块高")
          Counter() {
            Text(this.blockheight.toString())
          }
          .onInc(() => {
            this.blockheight+=2;
          })
          .onDec(() => {
            if (this.blockheight>2) {
              this.blockheight-=2;
            }
          })
        }
      }
      Text("设置滑块形状")
      Row({space:10}){
        Button('默认圆形').onClick(()=>{
          this.blockStyle ={type:SliderBlockType.DEFAULT}
        })
        Button('图片资源').onClick(()=>{
          this.blockStyle ={type:SliderBlockType.IMAGE,image:$r('app.media.circle_ic_fav')}
        })
        Button('自定义形状').onClick(()=>{
          this.blockStyle ={type:SliderBlockType.SHAPE,
            shape:
            new Circle({width:10,height:10})
            //   .width(40)
            //   .height(40)
            // .fill(getRandomColor()) //填充区域的颜色
            // .fillOpacity(0.5) //设置填充区域透明度
            // .strokeWidth(3)
            // .stroke(Color.Red)  //设置边框颜色
            // .strokeDashArray([1, 2])//设置边框间隙
          }
        })
      }
    }
  }
}

/**
 * 生成随机#RGB格式色值
 * @returns 格式为#rgb的字符串
 */
export function getRandomColor(): string {
  let letters = '0123456789abcdef'
  let color = '#'

  for (let i = 0; i < 6; i++) {
    // 生成0-15的随机数
    const randomIndex = Math.floor(Math.random() * 16)
    // 添加随机字符
    color += letters[randomIndex]
  }
  return color
}

遗留问题： 滑块使用自定义shape时，只支持new，并且不能设置属性，否则会闪退