基于ETS開發(fā)范式制作Loading組件

最近剛接觸基于 OpenHarmony 開源框架的應(yīng)用開發(fā)，特別是基于 JS/ETS 開發(fā)范式。

其中基于 JS 的應(yīng)用開發(fā)，與 vue 語法和思想高度相似，數(shù)據(jù)模型僅僅是普通的 JavaScript 對象。而當(dāng)你修改它們時，視圖會進行更新。這使得狀態(tài)管理非常簡單直接式?？梢灶惐葘W(xué)習(xí)。

今天就 ETS 規(guī)范，寫一個 Loading 的組件，熟悉 ETS 下的一些基礎(chǔ)組件的應(yīng)用和聯(lián)動。

參考資料

OpenHarmony API：

https://docs.openharmony.cn/pages/000701010201/

OpenHarmony / docs：

https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md

UI開發(fā)模式

如下圖：

實現(xiàn)

①新建項目

如下圖：

語言選擇 eTS，API Version 選擇 8，不然部分組件不支持。

②頁面布局

如下：

• 用到的容器組件有：Column，Row

• 用到的其他組件有：Image，Text，Slider

Column(){//沿垂直方向布局的容器
Row(){//沿水平方向布局容器。
Text()//文本，用于呈現(xiàn)一段信息。
Image()
}
Row(){
Text()
Image()//圖片組件，用來渲染展示圖片。
}
Row(){
Text()
Silder()//滑動條組件，用來快速調(diào)節(jié)設(shè)置值，如音量、亮度等。
}
Row(){
Text()
Silder()
}
}

③根據(jù) Silder 和 Image 的參數(shù)設(shè)置要求賦初始值

如下圖：

@StateinSetValue:number=10
@StateoutVerticalSetValue:number=40
@StateinVerticalSetValue:number=40

@Stateprivatedegree:number=0
@Stateprivatespeed:number=5
@Stateprivatetimer:number=0
@StateprivateimageSize:number=0

④設(shè)置關(guān)聯(lián)

將 Slider 進度值賦給 Image rotate 屬性的坐標(biāo)值，在頁面加載的生命周期 onPageShow 中反復(fù)這一過程，最后記得把清楚定時器以免內(nèi)存泄漏。

Image($r('app.media.load'))
.rotate({x:0,y:0,z:1,angle:this.degree}).objectFit(ImageFit.Contain)
.scale({x:this.imageSize,y:this.imageSize})

speedChange(){
this.timer=setInterval(()=>{
this.degree+=this.speed;
},20)
}
onPageShow(){
this.speedChange()
}
onPageHide(){
this.timer=null;
}

⑤用 @Builder() 裝飾器封裝相同的功能，減少冗余代碼

代碼如下：

//聲明
@Builder
TextInfo(text:string){
Column(){
Text(text)
.fontSize(29)
.fontColor("#708090")
.width('90%')
.margin({top:20,left:25})
}
}
//調(diào)用
this.TextInfo('Changespeed'）

效果圖如下：

總結(jié)

此例就基于 ETS 組件的基本使用和關(guān)聯(lián)，以及裝飾器 @Builer 的簡單使用展開說明，旨在熟悉 ETS 規(guī)范和對組件的初體驗。

思考：如果業(yè)務(wù)比較復(fù)雜，可以根據(jù)實際的場景和數(shù)據(jù)的情況抽成更小粒度的組件，以便更方便的組合，提升效率。