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