了解更多开源内容请访问：开源基础软件社区https://ost.51cto.comOpenHarmony3.1支持众多组件，本文演示如何使用滑块组件（Slider）来控制另一个组件。本案例使用两个Slider组件分别控制屏幕上方风车的旋转速度和大小。读者可以学习到Slider组件的基本用法以及如何在OpenHarmony中控制组件。OpenHarmony3.1目前支持ETS和JS。本文选择ETS作为开发语言。测试本文代码，有两种方式：1.使用HarmonyOSSDK7在远程模拟器中测试。2、使用大禹200开发板（或其他支持OpenHarmony3.1的开发板）进行测试。第一种方式只能支持SDK7及以上版本的ETS。本章将采用第二种方法在大禹200开发板上测试本程序。运行效果如下图所示。通过第一个Slider组件可以控制风车的旋转速度，通过第二个Slider组件可以控制风车的大小。下图是风车缩小的效果。本文将使用ETS编写代码，所以创建项目时保持默认值，如下图所示。创建项目后，需要找到一个风车图片，然后将图片放到如下图所示的目录中。本例所有逻辑代码都写在index.ets中。由于图片放在rawfile目录下，所以需要使用Image组件来显示rawfile中的图片，代码如下：Image($rawfile('windmill.png')).objectFit(ImageFit.Contain).height(150).width(150).margin({top:300,bottom:300,right:16}).rotate({x:0,y:0,z:1,angle:this.angle}).scale({x:this.imageSize,y:this.imageSize})Image组件中设置了很多属性，比如高度、宽度等，使用静态值设置，而旋转角度(this.angle)和图像缩放(this.imageSize)都是变量用来设置，这就是OpenHarmony控制组件的方式。OpenHarmony采用将变量值绑定到属性的一个属性的方式来控制设置或获取组件的属性值，所以如果要修改组件的某个属性值，需要获取组件对象本身，而是直接用属性绑定变量修改属性。控制风车图片缩放比例的Slider组件代码如下：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=valueclearInterval(this.interval)this.speedChange()})这段代码中有一个关键，这是在onChange方法中this.speed=value。当Slider组件的滑块滑动时，会触发onChange方法，value参数值为滑块的当前值。而this.speed是一个全局变量，表示风车每次变化的角度，即Image组件中rotate方法设置的this.angle的速度。为了使风车旋转，使用定时器定时改变Image组件的旋转角度。代码如下：speedChange(){varthat=this;那。角度=0;//创建一个定时器，每15毫秒更新一次Image组件的角度this.interval=setInterval(function(){that.angle+=that.speed},15)}//页面开始调用函数onPageShow(){//首先清除定时器clearInterval(this.interval)//启动定时器this.speedChange()}本例完整代码如下：@Entry@ComponentstructIndex{@Stateprivatespeed:number=5@StateprivateimageSize:number=1@Stateprivateangle:number=0@Stateprivateinterval:number=0@BuilderDescribeText(text:string,speed:number){Stack(){文本(text+speed.toFixed(1)).margin({top:30}).fontSize(20).fontWeight(FontWeight.Bold)}}build(){Column(){Image($rawfile('windmill.png')).objectFit(ImageFit.Contain).height(150).width(150).margin({top:300,bottom:300,right:16}).rotate({x:0,y:0,z:1,angle:this.angle}).scale({x:this.imageSize,y:this.imageSize})//创建一个Text组件（用于描述Slider组件）this.DescribeText('speed:',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)=>{这个.speed=valueconsole.log("value:"+value);clearInterval(this.interval)this.speedChange()})//创建一个Text组件（用于描述Slider组件）this.DescribeText('缩放比例:',this.imageSize)//用于控制缩放Slider({value:this.imageSize,min:0.5,max:4.5,step:0.1,style:SliderStyle.OutSet}).showTips(true).blockColor(Color.Red).onChange((value:number,mode:SliderChangeMode)=>{this.imageSize=value})}.margin({left:30,right:30})}speedChange(){那个=这个；那。角度=0；这。interval=setInterval(function(){that.angle+=that.speed},15)}onPageShow(){clearInterval(this.interval)this.speedChange()}}在此代码中，DescribeText方法用于创建文本组件。这是因为Text组件会被多次使用，所以创建了一个方法来统一创建Text组件，这样会减少代码的冗余。想了解更多开源内容，请访问：开源基础软件社区https://ost.51cto.com。
