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

//默认值：与参数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 //滑动条取值范围是否反向

  @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@ComponentV2struct 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}