ArkUI

方舟開(kāi)發(fā)框架（簡(jiǎn)稱(chēng)ArkUI）是鴻蒙開(kāi)發(fā)的UI框架，提供如下兩種開(kāi)發(fā)范式，我們 只學(xué)聲明式開(kāi)發(fā)范式

1. [基于ArkTS的聲明式開(kāi)發(fā)范式]
2. [兼容JS的類(lèi)Web開(kāi)發(fā)范式]
3. 開(kāi)發(fā)前請(qǐng)熟悉鴻蒙開(kāi)發(fā)指導(dǎo)文檔：[复制gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

整體架構(gòu)圖

我們使用ArkTS寫(xiě)完頁(yè)面描述后，交給語(yǔ)言運(yùn)行時(shí)進(jìn)行語(yǔ)法解析，再之后由C++編寫(xiě)的后端引擎將UI轉(zhuǎn)換為渲染指令交給渲染引擎繪制到屏幕上

ArkUI語(yǔ)法初見(jiàn)

1. ArkTS對(duì)TypeScript語(yǔ)言進(jìn)行擴(kuò)展，提供值類(lèi)型結(jié)構(gòu)struct。
2. struct定義自定義組件，必須搭配Component或者CustomDialog使用
3. ArkUI中組件定義和狀態(tài)管理都是通過(guò)裝飾器來(lái)做的。TS中的裝飾器主要有類(lèi)裝飾器、屬性裝飾器、方法裝飾器以及參數(shù)裝飾器四種
4. 事件方法和屬性方法只是方法的入?yún)⒉灰粯?，一個(gè)是基本值或者表達(dá)式值，一個(gè)是函數(shù)。
5. 在TS中函數(shù)我們就把函數(shù)當(dāng)成變量來(lái)用就行，只不過(guò)普通變量是存儲(chǔ)一個(gè)類(lèi)型的值，而函數(shù)用來(lái)存儲(chǔ)一個(gè)輸入到輸出的轉(zhuǎn)變過(guò)程
6. 還記得我們上面說(shuō)的描述UI嘛，在這里就在build函數(shù)中描述。框架會(huì)自動(dòng)調(diào)用build，不需要我們手動(dòng)調(diào)用

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

ArkUI的渲染分為兩大情況

從創(chuàng)建到顯示(①~⑤)

① 通過(guò)devEco將源碼編譯成帶類(lèi)型標(biāo)識(shí)的字節(jié)碼文件，同時(shí)攜帶創(chuàng)建這個(gè)結(jié)構(gòu)所需信息的指令流

② 通過(guò)跨語(yǔ)言調(diào)用生成C++層的Component樹(shù)。這一步只是把ArkTS描述轉(zhuǎn)變成了使用C++描述

③ 通過(guò)Component樹(shù)生成Element樹(shù)，Element是Component的實(shí)例，用于表示一個(gè)具體的組件節(jié)點(diǎn)。界面在運(yùn)行時(shí)的樹(shù)形結(jié)構(gòu)就是通過(guò)Element樹(shù)來(lái)維持的，同時(shí)自動(dòng)更新的diff算法也是依賴(lài)Element樹(shù)來(lái)減少?gòu)?fù)雜度的

④ 對(duì)于每個(gè)可顯示的Element都會(huì)為其創(chuàng)建對(duì)應(yīng)的RenderNode。RenderNode負(fù)責(zé)一個(gè)節(jié)點(diǎn)的顯示信息，它形成的Render樹(shù)維護(hù)著整個(gè)界面渲染需要用到的信息，包括位置、大小、繪制命令等。后續(xù)的布局、繪制都是在Render樹(shù)上進(jìn)行的

⑤ 實(shí)現(xiàn)真正的渲染并顯示繪制結(jié)果。复制HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿

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

⑥ 點(diǎn)擊事件傳遞到組件，組件的onClick事件方法被觸發(fā)執(zhí)行

⑦ 由于onClick事件方法中@State注解過(guò)的變量改變了，相應(yīng)getter/setter函數(shù)會(huì)被觸發(fā)

⑧ 狀態(tài)管理模塊定位出關(guān)聯(lián)的UI組件

⑨ 狀態(tài)管理模塊更新相應(yīng)的Element樹(shù)的信息

⑩ 更新相應(yīng)的UI組件的渲染信息

? 界面顯示，與⑤類(lèi)似

盒子模型

上面我們說(shuō)的布局原理，子視圖上報(bào)給父視圖自身大小的值是指 組件內(nèi)容區(qū)的大小

審核編輯 黃宇