目錄

基本語法概述

聲明式UI描述

自定義組件

創建自定義組件

自定義組件的結構--struct ，@Component，build()函數

生命周期

---

基本語法概述

• 裝飾器： 用于裝飾類、結構、方法以及變量，并賦予其特殊的含義。如上述示例中@Entry、@Component和@State都是裝飾器，@Component表示自定義組件，@Entry表示該自定義組件為入口組件，@State表示組件中的狀態變量，狀態變量變化會觸發UI刷新。
• UI描述：以聲明式的方式來描述UI的結構，例如build()方法中的代碼塊。
• 自定義組件：可復用的UI單元，可組合其他組件，如上述被@Component裝飾的struct Hello。
• 系統組件：ArkUI框架中默認內置的基礎和容器組件，可直接被開發者調用，比如示例中的Column、Text、Divider、Button。
• 屬性方法：組件可以通過鏈式調用配置多項屬性，如fontSize()、width()、height()、backgroundColor()等。
• 事件方法：組件可以通過鏈式調用設置多個事件的響應邏輯，如跟隨在Button后面的onClick()。
• 系統組件、屬性方法、事件方法具體使用可參考基于ArkTS的聲明式開發范式。

除此之外，ArkTS擴展了多種語法范式來使開發更加便捷：

• @Builder/@BuilderParam：特殊的封裝UI描述的方法，細粒度的封裝和復用UI描述。
• @Extend/@Style：擴展內置組件和封裝屬性樣式，更靈活地組合內置組件。
• stateStyles：多態樣式，可以依據組件的內部狀態的不同，設置不同樣式。

聲明式UI描述

ArkTS以聲明方式 組合 和 擴展 組件 來 描述應用程序的UI，同時還提供了基本的屬性、事件和子組件配置方法，幫助開發者實現應用交互邏輯。

//如果組件支持子組件配置，則需在尾隨閉包"{...}"中為組件添加子組件的UI描述。Column、Row、Stack、Grid、List等組件都是容器組件。@State size:number = 10
myClickHandler(){}build(){Column() {Row() {Image('https://xyz/test.jpg')Image('test1.jpg').width(100).height(100)// string類型的參數Text('test')//枚舉類型.fontSize(20).fontColor(Color.Red).fontWeight(FontWeight.Bold)// $r形式引入應用資源，可應用于多語言場景Text($r('app.string.title_value')).fontSize(this.size)// 無參數形式Text()Button('click +1')//事件方法以“.”鏈式調用的方式配置系統組件支持的事件//三種方式.onClick(() => {this.myText = 'ArkUI';}).onClick(function(){this.myText = 'ArkUI';}.bind(this)).onClick(this.myClickHandler.bind(this))}
}
}

自定義組件

創建自定義組件

自定義組件具有以下特點：

• 可組合：允許開發者組合使用系統組件、及其屬性和方法。
• 可重用：自定義組件可以被其他組件重用，并作為不同的實例在不同的父組件或容器中使用。
• 數據驅動UI更新：通過狀態變量的改變，來驅動UI的刷新

自定義組件的結構--struct ，@Component，build()函數

@Component
struct MyComponent {build() {}
}

@Entry
@Component
struct MyComponent {
}

?提示1： @Entry裝飾的自定義組件將作為UI頁面的入口?

?提示2：@Entry裝飾的自定義組件，其build()函數下的根節點唯一且必要，且必須為容器組件，其中ForEach禁止作為根節點。

@Component裝飾的自定義組件，其build()函數下的根節點唯一且必要，可以為非容器組件，其中ForEach禁止作為根節點。

//自定義組件?

//@Component裝飾的自定義組件，其build()函數下的根節點唯一且必要，可以為非容器組件，其中ForEach禁止作為根節點。@Component
struct HelloComponent {@State message: string = 'Hello, World!';build() {// HelloComponent自定義組件組合--系統組件Row和Text//(當前根節點Row)Row() {Text(this.message).onClick(() => {// 狀態變量message的改變驅動UI刷新，UI從'Hello, World!'刷新為'Hello, ArkUI!'this.message = 'Hello, ArkUI!';})}}
}

?//多次調用自定義組件?

//@Entry裝飾的自定義組件，其build()函數下的根節點唯一且必要，且必須為容器組件，其中ForEach禁止作為根節點。
@Entry
@Component
struct ParentComponent {build() {//（當前根節點Column）Column() {Text('ArkUI message')//多次調用自定義組件HelloComponent({ message: 'Hello, World!' });Divider()HelloComponent({ message: '你好!' });}}
}

生命周期

---

頁面生命周期，即被@Entry裝飾的組件生命周期，提供以下生命周期接口：

• onPageShow：頁面每次顯示時觸發一次，包括路由過程、應用進入前臺等場景，僅@Entry裝飾的自定義組件生效。
• onPageHide：頁面每次隱藏時觸發一次，包括路由過程、應用進入前后臺等場景，僅@Entry裝飾的自定義組件生效。
• onBackPress：當用戶點擊返回按鈕時觸發，僅@Entry裝飾的自定義組件生效。

組件生命周期，即一般用@Component裝飾的自定義組件的生命周期，提供以下生命周期接口：

• aboutToAppear：組件即將出現時回調該接口，具體時機為在創建自定義組件的新實例后，在執行其build()函數之前執行。
• aboutToDisappear：在自定義組件析構銷毀之前執行。不允許在aboutToDisappear函數中改變狀態變量，特別是@Link變量的修改可能會導致應用程序行為不穩定。

生命周期流程如下圖所示，下圖展示的是被@Entry裝飾的組件（首頁）生命周期。