ArkUI

方舟開發框架（簡稱ArkUI）是鴻蒙開發的UI框架，提供如下兩種開發范式，我們 只學聲明式開發范式

1. [基于ArkTS的聲明式開發范式]
2. [兼容JS的類Web開發范式]
3. 開發前請熟悉鴻蒙開發指導文檔：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

整體架構圖

我們使用ArkTS寫完頁面描述后，交給語言運行時進行語法解析，再之后由C++編寫的后端引擎將UI轉換為渲染指令交給渲染引擎繪制到屏幕上

ArkUI語法初見

1. ArkTS對TypeScript語言進行擴展，提供值類型結構struct。
2. struct定義自定義組件，必須搭配Component或者CustomDialog使用
3. ArkUI中組件定義和狀態管理都是通過裝飾器來做的。TS中的裝飾器主要有類裝飾器、屬性裝飾器、方法裝飾器以及參數裝飾器四種
4. 事件方法和屬性方法只是方法的入參不一樣，一個是基本值或者表達式值，一個是函數。
5. 在TS中函數我們就把函數當成變量來用就行，只不過普通變量是存儲一個類型的值，而函數用來存儲一個輸入到輸出的轉變過程
6. 還記得我們上面說的描述UI嘛，在這里就在build函數中描述。框架會自動調用build，不需要我們手動調用

從代碼到UI顯示的整體渲染流程

ArkUI的渲染分為兩大情況

從創建到顯示(①~⑤)

① 通過devEco將源碼編譯成帶類型標識的字節碼文件，同時攜帶創建這個結構所需信息的指令流

② 通過跨語言調用生成C++層的Component樹。這一步只是把ArkTS描述轉變成了使用C++描述

③ 通過Component樹生成Element樹，Element是Component的實例，用于表示一個具體的組件節點。界面在運行時的樹形結構就是通過Element樹來維持的，同時自動更新的diff算法也是依賴Element樹來減少復雜度的

④ 對于每個可顯示的Element都會為其創建對應的RenderNode。RenderNode負責一個節點的顯示信息，它形成的Render樹維護著整個界面渲染需要用到的信息，包括位置、大小、繪制命令等。后續的布局、繪制都是在Render樹上進行的

⑤ 實現真正的渲染并顯示繪制結果。HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿

按鈕點擊到更新顯示(⑥~?)

⑥ 點擊事件傳遞到組件，組件的onClick事件方法被觸發執行

⑦ 由于onClick事件方法中@State注解過的變量改變了，相應getter/setter函數會被觸發

⑧ 狀態管理模塊定位出關聯的UI組件

⑨ 狀態管理模塊更新相應的Element樹的信息

⑩ 更新相應的UI組件的渲染信息

? 界面顯示，與⑤類似

盒子模型

上面我們說的布局原理，子視圖上報給父視圖自身大小的值是指 組件內容區的大小

審核編輯 黃宇