本文介绍HarmonyOS鸿蒙eTS开发中Slider组件的使用，将附上主要的代码。主要功能为通过Slider组件，控制图片旋转速度、缩放比例、透明度的调节。

前言

看到【趣味代码】以父之名码力全开活动，并参照指导文档中CodeLabel关于基础组件Slider的使用（eTS)，加入完善了示例中的编码挑战，实现控制图片透明度从0到1的变化。

有以下三点：

1.旋转速度从0-10，默认速度3。

2.缩放比例从0.5-2.5，默认1不缩放。

3.透明度从0-1，默认0.8。

以下是取得的效果图：

主要代码如下

@Entry

@Component

struct Index {

  @State private speed:number=3       //旋转速度，最大10

  @State private imagesize:number=1   //缩放比例，最大2.5

  @State private alpha:number=1       //透明度，为0时透明，为1时不透明

  @State private angle:number=0

  @State private interval:number=0

  @Builder DescribeText(text:string,speed:number){

    Stack(){

      Text(text+speed.toFixed(1))

        .margin({top:20})

        .fontSize(20)

        .fontWeight(FontWeight.Bold)

    }

  }

  build() {

    Column(){

      Image($rawfile("picture.png"))

        .objectFit(ImageFit.Contain)

        .height(150)

        .width(150)

        .margin({top:130,bottom:80,right:16})

        .rotate({x:0,y:0,z:1,angle:this.angle})

        .scale({x:this.imagesize,y:this.imagesize})

        .opacity(this.alpha)

      this.DescribeText('速度:',this.speed)

      Slider({value:this.speed,min:1,max:10,step:1,style:SliderStyle.OutSet})

        .showTips(true)

        .blockColor(Color.Blue)

        .onChange((value:number,mode:SliderChangeMode)=>{

          this.speed=value

          clearInterval(this.interval)

          this.speedChange()

        })

      this.DescribeText('缩放比例：',this.imagesize)

      Slider({value:this.imagesize,min:0.5,max:2.5,step:0.1,style:SliderStyle.OutSet})

        .showTips(true)

        .blockColor(Color.Blue)

        .onChange((value:number,mode:SliderChangeMode)=>{

          this.imagesize=value

        })

      this.DescribeText('透明度：',this.alpha)

      Slider({value:this.alpha,min:0,max:1,step:0.1,style:SliderStyle.OutSet})

        .showTips(true)

        .blockColor(Color.Blue)

        .onChange((value:number,mode:SliderChangeMode)=>{

          this.alpha=value

        })

    }

  }

  speedChange(){

    var that=this;

    that.angle=0;

    this.interval=setInterval(function(){

      that.angle+=that.speed

    },15)

  }

  onPageShow(){

    clearInterval(this.interval)

    this.speedChange()

  }

}

注意事项

因为是用eTS开发，API版本要求API7以上，只能使用远程模拟器中的P40Pro调试，其他的模拟器及真机API版本都不符合要求，所以效果图显示清晰度不够，如果推出了3.0版本其效果会更好些。

相关参考：使用Slider时能否支持多指触控，及java UI嵌套JS混合开发。