基本概念

• 裝飾器：用于裝飾類、結(jié)構(gòu)、方法及變量，并賦予其特殊的含義。

  例如：
  @Entry 有該裝飾器的自定義組件，可以在UIAbility中使用，作為頁(yè)面入口。該裝飾器配合@Component裝飾器使用
  @Component 自定義組件
  @State 表示組件中的狀態(tài)變量，狀態(tài)變化會(huì)出發(fā)UI刷新。
  @L

• UI描述：以聲明式的方式來(lái)描述UI的結(jié)構(gòu)，在組件的build方法中。

• 自定義組件：可復(fù)用的UI單元，可組合其他組件。

• 系統(tǒng)組件：ArkUI框架中默認(rèn)內(nèi)置的基礎(chǔ)和容器組件。例如：Column、Row、Text、Image、Button等。

• 屬性方法：ArkTs中，使用鏈?zhǔn)秸{(diào)用的方式來(lái)配置組件屬性。

• 事件方法：事件響應(yīng)邏輯，也是使用鏈?zhǔn)秸{(diào)用的方式，設(shè)置如onclick方法等，在方法內(nèi)部進(jìn)行實(shí)現(xiàn)。

基礎(chǔ)的組件一般就是由上述部分組成，如下圖：

當(dāng)然，也有一些其他的語(yǔ)法范式方便我們進(jìn)行封裝復(fù)用，如：

除此之外，ArkTS擴(kuò)展了多種語(yǔ)法范式來(lái)使開發(fā)更加便捷：

• @Builder/@BuilderParam：特殊的封裝UI描述的方法，細(xì)粒度的封裝和復(fù)用UI描述。

• @Extend/@Styles：擴(kuò)展內(nèi)置組件和封裝屬性樣式，更靈活地組合內(nèi)置組件。

• stateStyles：多態(tài)樣式，可以依據(jù)組件的內(nèi)部狀態(tài)的不同，設(shè)置不同樣式。

這些后續(xù)會(huì)講到。

聲明式UI描述

創(chuàng)建組件

在ArkTs的基礎(chǔ)語(yǔ)法中，我們講到類，實(shí)例化一個(gè)類，需要使用new關(guān)鍵字進(jìn)行。而在UI組件中，創(chuàng)建組件是不需要使用new關(guān)鍵字的。

無(wú)參數(shù)

如果組件的接口定義沒有包含必選的構(gòu)造參數(shù)，則組件后面的()中可以不配置任何內(nèi)容。

例如Button() Text()等包含可選參數(shù)的組件，Driver()等沒有構(gòu)造參數(shù)的組件。

有參數(shù)

如果組件的接口定義中包含了必選構(gòu)造參數(shù)，則在組件后的()中需要配置相應(yīng)的參數(shù)。
例如Image()組件，必選參數(shù)為src。

變量和表達(dá)式也可以用作參數(shù)賦值。

配置屬性

組件的屬性方法以.鏈?zhǔn)秸{(diào)用的方式配置樣式和其他屬性。

	Text(this.message).id('HelloWorld').fontSize(50).fontWeight(FontWeight.Bold).alignRules({center: { anchor: '__container__', align: VerticalAlign.Center },middle: { anchor: '__container__', align: HorizontalAlign.Center }})

配置事件

使用箭頭函數(shù)配置組件的事件方法

	Button() {Text('跳轉(zhuǎn)').fontSize(30).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({ top: '0.00vp', right: '0.00vp', bottom: '150.00vp', left: '0.00vp' }).backgroundColor('#ff0000').width('50%').height('10%').alignRules({center: { anchor: '__container__', align: VerticalAlign.Bottom },middle: { anchor: '__container__', align: HorizontalAlign.Center }}).onClick(() => {console.info('click second button')router.pushUrl({ url: 'pages/Second' }).then(() => {console.info('jump success')}).catch((err: BusinessError) => {console.error(`jump failed,errCode:${err.code},errMessage:${err.message}`)})})}.height('100%').width('100%')

如需使用組件中的成員函數(shù)配置組件的事件方法，需要使用bind this。

myClickHandler(): void {this.counter += 2;
}
...
Button('add counter').onClick(this.myClickHandler.bind(this))

ArkTs語(yǔ)法不推薦使用成員函數(shù)配合bind(this)的方式去配置組件的事件方法

使用聲明的箭頭函數(shù)，可以直接調(diào)用，不需要使用bind(this)

fn = () => {console.info(`counter: ${this.counter}`)this.counter++
}
...
Button('add counter').onClick(this.fn)

配置子組件

如果組件是容器組件，則支持子組件配置，需要在組件聲明后，緊隨的閉包中添加子組件的描述。如Column Row List等組件。

	RelativeContainer() {Text(this.message).id('SecondHelloWorld').fontSize(50).fontWeight(FontWeight.Bold).alignRules({center: { anchor: '__container__', align: VerticalAlign.Center },middle: { anchor: '__container__', align: HorizontalAlign.Center }})Button() {Text('back').fontSize('30').fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({bottom: 50}).alignRules({center: { anchor: '__container__', align: VerticalAlign.Bottom },middle: { anchor: '__container__', align: HorizontalAlign.Center }}).width('50%').height('10%').backgroundColor('#ff0000').onClick(() => {try {router.back()} catch (err) {let code = (err as BusinessError).codelet message = (err as BusinessError).messageconsole.info(`jump error:${code},${message}`)}})}.height('100%').width('100%')