OpenHarmony3.1組件：用滑桿組件控制風車
??想了解更多關(guān)于開源的內(nèi)容，請訪問：??
OpenHarmony3.1支持很多組件，這篇文章演示一下如何使用滑桿組件（Slider）控制另一個組件。這個案例通過兩個Slider組件分別控制屏幕上方風車的旋轉(zhuǎn)速度和大小。讀者可以從中學到Slider組件的基本用法，以及在OpenHarmony中如何控制組件。
OpenHarmony3.1目前支持ETS和JS。本文選用了ETS作為開發(fā)語言。要想測試本文的代碼，有如下兩種方式：
1. 使用HarmonyOS SDK7在遠程模擬器中測試。
2. 使用大禹200開發(fā)板（或其他支持OpenHarmony3.1的開發(fā)板）測試。
第一種方式只能使用SDK7或以上版本才支持ETS，本章會采用第二種方式，在大禹200開發(fā)板中測試這個程序，運行的效果如下圖所示。
通過第1個Slider組件可以控制風車旋轉(zhuǎn)的速度，通過第2個Slider組件可以控制風車的大小，下圖是風車縮小的效果。
本文會使用ETS編寫代碼，所以創(chuàng)建工程時保持默認值即可，如下圖所示。
創(chuàng)建完工程，需要找一個風車圖像，然后將該圖像放到如下圖所示的目錄中。
本案例中的所有邏輯代碼都在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組件中設置了很多屬性，如height、width等，這些都是使用靜態(tài)值設置的，而旋轉(zhuǎn)角度（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 = value
clearInterval(this.interval)
this.speedChange()
})
在這段代碼中有一個關(guān)鍵，就是onChange方法中的this.speed = value。當Slider組件的滑桿滑動時，會觸發(fā)onChange方法，value參數(shù)值就是滑桿的當前值。而this.speed是全局變量，表示風車每次轉(zhuǎn)動變化的角度，也就是Image組件中rotate方法設置的this.angle的增速。
為了讓風車轉(zhuǎn)動，使用了定時器每隔一定時間改變Image組件的旋轉(zhuǎn)角度，代碼如下：
speedChange() {
var that = this;
that.angle = 0;
// 創(chuàng)建定時器，每隔15毫秒更新一次Image組件的角度
this.interval = setInterval(function () {
that.angle += that.speed
}, 15)
}
// 頁面啟動調(diào)用該函數(shù)
onPageShow() {
// 先清除定時器
clearInterval(this.interval)
// 啟動定時器
this.speedChange()
}
本案例完整的代碼如下：
@Entry
@Component
struct Index {
@State private speed: number = 5
@State private imageSize: number = 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: 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 })
// 創(chuàng)建Text組件(用于描述Slider組件)
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
console.log("value:" + value);
clearInterval(this.interval)
this.speedChange()
})
// 創(chuàng)建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() {
var that = this;
that.angle = 0;
this.interval = setInterval(function () {
that.angle += that.speed
}, 15)
}
onPageShow() {
clearInterval(this.interval)
this.speedChange()
}
}
在這段代碼中使用了DescribeText方法創(chuàng)建Text組件，這是由于Text組件會被使用多次，所以做了一個方法統(tǒng)一創(chuàng)建Text組件，會減少代碼的冗余。
