ArkTS是HarmonyOS優(yōu)選的主力應(yīng)用開發(fā)語言。ArkTS圍繞應(yīng)用開發(fā)在TypeScript(簡(jiǎn)稱TS)生態(tài)基礎(chǔ)上做了進(jìn)一步擴(kuò)展密任。
- 基本語法:ArkTS定義了聲明式UI描述撒踪、自定義組件和動(dòng)態(tài)擴(kuò)展UI元素的能力,再配合ArkUI開發(fā)框架中的系統(tǒng)組件及其相關(guān)的事件方法浦箱、屬性方法等共同構(gòu)成了UI開發(fā)的主體吸耿。
- 狀態(tài)管理:ArkTS提供了多維度的狀態(tài)管理機(jī)制。在UI開發(fā)框架中酷窥,與UI相關(guān)聯(lián)的數(shù)據(jù)可以在組件內(nèi)使用咽安,也可以在不同組件層級(jí)間傳遞,比如父子組件之間蓬推、爺孫組件之間妆棒,還可以在應(yīng)用全局范圍內(nèi)傳遞或跨設(shè)備傳遞。另外沸伏,從數(shù)據(jù)的傳遞形式來看糕珊,可分為只讀的單向傳遞和可變更的雙向傳遞。開發(fā)者可以靈活的利用這些能力來實(shí)現(xiàn)數(shù)據(jù)和UI的聯(lián)動(dòng)毅糟。
- 渲染控制:ArkTS提供了渲染控制的能力红选。條件渲染可根據(jù)應(yīng)用的不同狀態(tài),渲染對(duì)應(yīng)狀態(tài)下的UI內(nèi)容姆另。循環(huán)渲染可從數(shù)據(jù)源中迭代獲取數(shù)據(jù)喇肋,并在每次迭代過程中創(chuàng)建相應(yīng)的組件坟乾。數(shù)據(jù)懶加載從數(shù)據(jù)源中按需迭代數(shù)據(jù),并在每次迭代過程中創(chuàng)建相應(yīng)的組件蝶防。
基本語法
裝飾器
用于裝飾類糊渊、結(jié)構(gòu)、方法以及變量慧脱,并賦予其特殊的含義渺绒。如上述示例中@Entry、@Component和@State都是裝飾器菱鸥,@Component表示自定義組件宗兼,@Entry表示該自定義組件為入口組件,@State表示組件中的狀態(tài)變量氮采,狀態(tài)變量變化會(huì)觸發(fā)UI刷新殷绍。
@Entry //該裝飾器表示為入口,可作為一個(gè)頁面使用
@Component//該組件表示為自定義組件鹊漠,作為組件需要添加build方法主到,在build中進(jìn)行UI的構(gòu)建
struct FirstPage{
@State msg:string='Hello' //狀態(tài)變量,在該變量數(shù)據(jù)發(fā)生改變時(shí)對(duì)應(yīng)ui也會(huì)發(fā)生相應(yīng)改變
build(){
...
}
}
UI描述
以聲明式的方式來描述UI的結(jié)構(gòu)躯概,例如build()方法中的代碼塊登钥。
a.創(chuàng)建組件
無參構(gòu)建:組件接口定義時(shí)沒有必傳參數(shù)時(shí),則()內(nèi)無需傳入?yún)?shù)娶靡,如下:
Column(){
Text()
Divider()
}
有參構(gòu)造:組件接口定義時(shí)有參數(shù)牧牢,則需在組件()內(nèi)傳入?yún)?shù),如下:
//圖片控件參數(shù)為必填
Image('https://xxx.xxx.png')
//文本控件參數(shù)為非必填
Text('msg')
b.配置屬性
單個(gè)屬性配置
Text('msg')
.FontSize(12)
多屬性配置
check:boolean=false
width:number=100
Text('msg')
.fontSize(12)//可配置常量
.width(this.width)//可配置變量
.fontColor(Color.Red)//可使用系統(tǒng)提供的枚舉類型
.backgroundColor(check?"#FFFFFF":"#000000")//可使用表達(dá)式
c.配置事件
事件方法以“.”鏈?zhǔn)秸{(diào)用的方式配置系統(tǒng)組件支持的事件姿锭。
- 使用lambda表達(dá)式配置組件的事件方法塔鳍。
Button('Click me')
.onClick(() => {
this.myText = 'ArkUI';
})
- 使用匿名函數(shù)表達(dá)式配置組件的事件方法,要求使用bind呻此,以確保函數(shù)體中的this指向當(dāng)前組件轮纫。
Button('add counter')
.onClick(function(){
this.counter += 2;
}.bind(this))
- 使用組件的成員函數(shù)配置組件的事件方法。
myClickHandler(): void {
this.counter += 2;
}
...
Button('add counter')
.onClick(this.myClickHandler.bind(this))
d.自定義組件
可復(fù)用的UI單元焚鲜,可組合其他組件掌唾,如ArkTS的基本組成圖中被@Component裝飾的struct Hello。
e.系統(tǒng)組件
ArkUI框架中默認(rèn)內(nèi)置的基礎(chǔ)和容器組件恃泪,可直接被開發(fā)者調(diào)用郑兴,比如ArkTS的基本組成圖中示例的Column、Text贝乎、Divider情连、Button。