---

前言

我們前面進行了了解元服務、IDE、ArkTS，目前前期準備工作已經差不了。我們可以進行學習UI階段了。距離實現元服務上架，又是一個里程碑式的進展。奧利給~

---

一、ArkUI是何方神圣？

ArkUI即方舟UI框架，提供了一套完整的基礎設施，包括簡潔的UI語法、豐富的UI功能（豐富的組件、布局、動畫以及交互事件），以及實時界面預覽工具（雙向預覽），支持開發者進行豐富頁面的開發。

ArkUI基于關鍵的應用UI開發底座，深度融合語言/編輯器/圖形。

二、聲明式UI

通過聲明UI結構和狀態，自動驅動界面渲染。開發者只需描述“界面應該是什么樣”，無需手動管理UI更新。適用于復雜度較高、團隊協作的應用開發，具有高開發效率、良好性能和易維護等優勢。

• 通過數據驅動UI發生變化，UI與業務邏輯分離，更直觀、更高效。
  

---

三、組件

組件是構成UI界面的最小單位，如列表、網格、按鈕、單選框、按鈕、文本等。
組件有無參數組件和有參數組件，有特有的屬性和事件以及子組件。

• 組件類型：分為無參數組件和有參數組件。

      /// 有參數組件Text('Hello！')/// 無參數組件Blank()

• 屬性，例如Text的fontColor屬性

     Text(this.message).fontColor(Color.Orange)

• 事件

   Button('Click').onClick(() => {console.log('點擊了我');})

• 子組件

    Column() {Text(this.message)Blank()}

1.基礎組件

基礎組件用于展示頁面的基礎元素，有文本Text、按鈕Button、圖片Image。

2.布局容器組件

布局容器組件用于組織組件的排列，有行Row、列Column、列表List、網格列表Grid、輪播圖swiper。

3.導航組件

導航組件實現頁面的跳轉和切換，有Navigation、Tabs。

4.自定義組件

通過多種組件的組合，封裝為可復用的UI單元。自定義組件基于struct實現，struct + 自定義組件名 + {…}的組合構成自定義組件，不能有繼承關系。對于struct的實例化，可以省略new。

@Entry
@Component
struct CustomCompent {build() {Column() {Text('Hello,ArkUI!')Blank().height(100)Text('Hello wold!')}.justifyContent(FlexAlign.Center).width('100%')}
}

5.組件生命周期

• 組件即將出現：aboutToAppear()，在創建自定義組件的新實例后調用。
  可以對狀態變量進行修改，修改后再build函數中生效。
• 組件構建：buld()
• 組件構建完成：onDidBuild()
• 頁面即將出現：onPageShow()
  頁面每次顯示時，都會回調這個函數，比如跳轉到這個頁面，從后臺進入前臺返回這個頁面。僅在@Entry修飾的組件中適用。
• 點擊按鈕或者側滑返回時：onBackPress()。僅在@Entry修飾的組件中適用。
• 頁面即將隱藏進入后臺時：onPageHide()。僅在@Entry修飾的組件中適用。
• 組件銷毀之前調用：aboutToDisappear()。

---

四、狀態管理

狀態變更引起了UI渲染。在聲明式UI編程框架中，UI是程序狀態的運行結果，用戶構建了一個UI模型，其中應用的運行時狀態作為參數。當參數改變時，UI作為返回結果，也將進行對應的改變。這些運行時的狀態變化導致的UI重新渲染，在ArkUI中統稱為狀態管理機制。

ArkUI有多維度的狀態管理機制，在UI開發框架中與UI相關聯的數據可以在組件內使用，也可以在不同組件層級間傳遞，比如組件內（@State）、父子組件之間（@Prop/@Link）、爺孫組件之間（@Provide/@Consume）、應用全局范圍內專遞或跨設備傳遞。

從數據的傳遞形式看，可分為只讀的單向傳遞（@Prop）和可變更的雙向傳遞（@Link）。

1.@State裝飾器: 狀態變量

@State裝飾的變量稱為狀態變量，使普通變量具備狀態屬性。當狀態變量改變時，會觸發其直接綁定的UI組件渲染更新。

2.@Prop裝飾器：父子單向同步

對父組件狀態變量值的修改，將同步給子組件@Prop裝飾的變量，子組件@Prop裝飾的變量的修改不會同步到父組件的狀態變量上。

3.@Link裝飾器：父子雙向同步

雙向同步。父組件狀態變量與子組件@Link建立雙向同步，當其中一方改變時，另一方也會同步更新。

4.@Provide/@Consume裝飾器：跨層級傳遞

@Provide和@Consume，應用于與后代組件的雙向數據同步、狀態數據在多個層級之間傳遞的場景。不同于上文提到的父子組件之間通過命名參數機制傳遞，@Provide和@Consume擺脫參數傳遞機制的束縛，實現跨層級傳遞。

5.@Observed/@ObjectLink裝飾器：嵌套類對象屬性變化

@ObjectLink和@Observed類裝飾器用于在涉及嵌套對象或數組的場景中進行雙向數據同步。

---

五、路由/導航

組件導航（Navigation）和頁面路由（@ohos.router）均提供了應用內的頁面跳轉能力。

1.組件導航

在組件導航（Navigation）框架下，“頁面”通過NavDestination組件承載，特指一個NavDestination組件包含的內容。
Navigation是路由導航的根視圖容器，一般作為頁面（@Entry）的根容器，包括單欄（Stack）、分欄（Split）和自適應（Auto）三種顯示模式。Navigation組件適用于模塊內和跨模塊的路由切換，通過組件級路由能力實現更加自然流暢的轉場體驗，并提供多種標題欄樣式來呈現更好的標題和內容聯動效果。一次開發，多端部署場景下，Navigation組件能夠自動適配窗口顯示大小，在窗口較大的場景下自動切換分欄展示效果。

Navigation組件主要包含?導航頁和子頁。導航頁由標題欄（包含菜單欄）、內容區和工具欄組成，可以通過hideNavBar屬性進行隱藏，導航頁不存在路由棧中，與子頁，以及子頁之間可以通過路由操作進行切換。

// push page
this.pathStack.pushPath({ name: 'pageOne' });// pop page
this.pathStack.pop();
this.pathStack.popToIndex(1);
this.pathStack.popToName('pageOne');// replace page
this.pathStack.replacePath({ name: 'pageOne' });// clear all page
this.pathStack.clear();

2.Router頁面路由

Router路由的頁面是一個@Entry修飾的Component，每一個頁面都需要在main_page.json中聲明。
頁面路由指在應用程序中實現不同頁面之間的跳轉和數據傳遞。Router模塊通過不同的url地址，可以方便地進行頁面路由，輕松地訪問不同的頁面。

// push page
router.pushUrl({ url:"pages/pageOne", params: null });// pop page
this.getUIContext().getRouter().back({ url: "pages/pageOne" });// replace page
router.replaceUrl({ url: "pages/pageOne" });

---

參考

• 文檔——學習ArkUI
• 視頻——ArkUI框架介紹-嗶哩嗶哩