HDC技術分論壇：HarmonyOS新一代UI框架的全面解讀

作者：yuzhiqiang，UI程式設計框架首席技術專家

在Harmony 3.0.0開發者預覽版中，包含了新一代的宣告式UI框架ArkUI 3.0、多語言跨平臺編譯器ArkCompiler 3.0、跨端開發工具DevEco Studio3.0，以及基於TS/JS語言的API 7，全面提升開發者體驗。

本期，我們要為大家重點介紹HarmonyOS新一代宣告式UI框架ArkUI 3.0。

一、UI程式設計框架

在介紹ArkUI 3.0之前，我們先來簡要了解一下什麼是UI程式設計框架。

UI程式設計框架，是為應用開發者提供的開發UI的基礎設施，主要包括UI控制元件（按鈕/列表等），檢視佈局（擺放/排列相應的UI控制元件），動畫機制（動畫設計以及效果呈現），互動事件處理（點選/滑動等），以及相應的程式語言和程式設計模型等。從系統執行的維度來看，UI程式設計框架也包括一個執行時，負責應用在系統中執行時所需的資源載入、UI渲染和事件響應等。

總體而言，UI程式設計框架提供了開發以及執行UI介面所需要的框架能力，主要架構如下圖所示：

圖1 UI程式設計框架

• 開發模型：對開發者提供開發正規化、UI控制元件/佈局/動效/互動、程式語言等。它體現的是開發效率與難易程度。
  

• 執行框架：UI介面渲染及互動的基礎能力框架，包括相應的佈局引擎、控制元件機制、動效引擎、事件機制、渲染管線等，並結合語言虛擬機器和圖形引擎，將開發者的程式執行在具體系統平臺上。它體現的是應用執行的效能體驗。

• 平臺適配：承載框架的具體作業系統或平臺適配層。

UI程式設計框架的關鍵需求，主要有以下兩類：

• 開發效率：包括程式碼量、學習曲線、工具、社群、三方庫完備度等。
  

• 效能體驗：包括啟動速度、幀率、響應時延、酷炫效果、資源佔用等。

另外，隨著智慧裝置的急劇增長，UI程式設計框架還需要考慮如何更好地適配不同裝置的差異性，包括裝置形態差異（比如螢幕形狀、尺寸、解析度、互動模式等），以及裝置能力差異（比如記憶體、CPU、GPU等）。  

二、ArkUI框架的演進

為了更好地滿足開發效率和效能體驗等相關的需求， ArkUI 3.0綜合考慮了UI渲染以及語言和執行時，圍繞著極簡開發、高效能、跨裝置跨平臺進一步演進。下圖描述了ArkUI整體架構的演進：

圖2 ArkUI框架演進

圖的左側是2020年釋出的JS UI框架的架構示意圖。它主要支援類Web的前端開發正規化，透過DSL（domain-specific language，領域特定語言）轉換層，跨語言對接到宣告式UI後端引擎，並結合JS引擎完成整體UI渲染。圖的右側是新的ArkUI 3.0框架，主要有以下幾個關鍵的變化：

（1）引入了新一代的宣告式UI開發正規化，實現極簡的UI描述語法。

（2）設計了統一的前後端扁平化渲染機制，進一步提升UI渲染的效能並降低記憶體消耗。

（3）深度結合ArkCompiler 3.0的方舟編譯器和方舟執行時，提升語言的執行效能和跨語言通訊能力。

（4）在工具方面，針對新一代的宣告式UI開發正規化構建了新的編譯工具鏈和預覽引擎，提供了所見即所得的實時預覽機制。

另外，在ArkUI 3.0框架中，類Web正規化會繼續保留，即類Web正規化和新一代的宣告式UI正規化都可以支援，可以各自獨立使用，但不能混用。

三、ArkUI 3.0的關鍵特性

接下來我們展開詳細介紹一下ArkUI 3.0的關鍵特性。

1. 新一代的宣告式UI開發正規化

具體而言，ArkUI 3.0中的新一代宣告式UI開發正規化，主要特徵如下：

（1）基於TypeScript擴充套件的宣告式UI描述語法，提供了類自然語言的UI描述和組合。

（2）開箱即用的多型元件。多型是指UI描述是統一的，UI呈現在不同型別裝置上會有所不同。比如Button元件在手機和手錶會有不同的樣式和互動方式。

（3）多維度的狀態管理機制，支援靈活的資料驅動的UI變更。

下面我們以一個具體的示例來說明新一代宣告式UI開發正規化的基本組成。如圖3所示的程式碼示例，UI介面會顯示一個“Hello World”的文字和一個“Click me”按鈕。當使用者點選“Click me”按鈕時，字串變數myText的值會從“World”變為“ACE”，文字最終顯示為“Hello ACE”。

圖3 宣告式UI開發正規化的基本概念

以上示例中所包含的 宣告式UI開發正規化的基本組成說明如下：

• 裝飾器：用來裝飾類、結構體、方法以及變數，賦予其特殊的含義，如上述示例中@Entry、@Component、@State都是裝飾器。@Component表示這是個自定義元件；@Entry則表示這是個入口元件；@State表示元件中的狀態變數，這個狀態變化會引起UI變更。
  

• 自定義元件：可複用的UI單元，可組合其它元件，如上述被@Component裝飾的struct Hello。

• UI描述：宣告式的方式來描述UI的結構，如上述build()方法內部的程式碼塊。

• 內建元件：框架中預設內建的基礎和佈局元件，可直接被開發者呼叫，比如示例中的Column、Text、Divider、Button。

• 事件方法：用於新增元件對事件的響應邏輯，統一透過事件方法進行設定，如跟隨在Button後面的onClick()。

• 屬性方法：用於元件屬性的配置，統一透過屬性方法進行設定，如fontSize()、width()、height()、color()等，可透過鏈式呼叫的方式設定多項屬性。

上述示例中，用@State裝飾過的變數myText，包含了一個基礎的狀態管理機制，即myText的值的變化，會引起相應的UI變更（Text元件）。ArkUI 3.0還提供多維度的狀態管理機制。和UI相關聯的資料，不僅僅在元件內使用，還可以在不同元件層級間傳遞，比如父子元件之間，爺孫元件之間，也可以是全域性範圍內的傳遞，還可以是跨裝置傳遞。另外，從資料的傳遞形式來看，可以分為只讀的單向傳遞和可變更的雙向傳遞。開發者可以靈活的利用這些能力來實現資料和UI的聯動。

ArkUI採用嵌入式領域特定語言（embedded Domain Specific Language， eDSL）的形式，結合宿主語言能力實現UI開發。透過eDSL，結合語法糖或者語言原生的超程式設計能力，設計了統一的UI開發正規化，並能夠結合不同語言來實現應用的邏輯處理部分。

2. 關鍵渲染效能

下面透過一個簡單的示例程式碼，為大家講述從程式碼到UI顯示的整體渲染流程。如圖4所示，此示例會在UI介面顯示一個“Click me”按鈕，按鈕下面同步顯示按鈕的點選次數。當使用者點選按鈕時，下面的點選次數會相應增加。

圖4 整體渲染流程

整個渲染過程分為兩個階段：

（1）初始顯示流程（步驟①~⑤）

① 原始碼透過相應的工具鏈，編譯為帶有型別標誌的目標檔案，同時也包含了如何建立UI結構資訊的指令流。

② 透過跨語言呼叫並生成了C++層Component樹（UI描述層）。

③ 透過Component樹進一步生成Element樹。Element是Component的例項，表示一個具體的元件節點，它形成的Element樹負責維持介面在整個執行時的樹形結構，方便計算更新時的區域性更新演算法等。

④ 對於每個可顯示的Element都會為其建立對應的RenderNode。RenderNode負責一個節點的顯示資訊，它形成的Render樹維護著整個介面渲染需要用到的資訊，包括位置、大小、繪製命令等。後續的佈局、繪製都是在Render樹上進行的。

⑤ 實現真正的渲染並顯示繪製結果。

（ 2）按鈕被點選後的顯示流程（步驟⑥~⑪）

⑥ 點選事件傳遞到元件，元件的onClick事件方法被觸發執行。

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

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

⑨ 狀態管理模組更新相應的Element樹的資訊。

⑩ 更新相應的UI元件的渲染資訊。

⑪ 介面顯示，與⑤類似。

整個渲染過程中所需的關鍵能力，除了極簡的開發正規化本身，主要包含以下三個部分：

• 編譯最佳化以及跨語言呼叫。結合目標檔案中的型別資訊標誌，ArkCompiler會實現相應的程式碼最佳化。另外，ArkCompiler也提供了高效的JS/TS -> C++跨語言呼叫機制。
  

• 扁平化渲染機制以及小物件組合機制。元件資訊的結構在前後端有基本一致的表示，進一步減少了轉換開銷，實現了扁平化的渲染。同時，UI元件內部都是透過輕量化物件來按需組合，記憶體消耗也進一步降低。

• 狀態管理機制。透過監聽變數的存取操作，實現資料變化的自動化感知並計算出相應的最小化UI元件更新範圍，實現高效的UI變更。

除此之外，長列表渲染是一種典型的應用場景，裡面可能會涉及到大量的資料，如果處理不當，會引起極大影響效能以及資源佔用。ArkUI 3.0針對這類常用的場景，提供了一種LazyForEach懶載入機制，會自動根據具體情況計算出合適的渲染資料，實現資料的按需載入，從而提升UI重新整理效率。LazyForEach可以結合常用的列表類元件（比如List、Grid等）靈活配合使用。

3. 高階UI元件庫

高階的UI元件庫可以進一步助力高效的應用開發。HarmonyOS的歐洲研發團隊基於ArkUI 3.0，構建了一些高階元件示例，比如：常用的圖表類元件、瀑布流佈局元件等。開發者可以透過幾行程式碼就可以實現複雜酷炫的UI效果，比如自適應的圖片增刪、行列變化，以及相應的酷炫動效效果。

示例如下：

圖5 圖表元件

圖6 瀑布流佈局元件

4. 多裝置開發

除 了UI開發套件，ArkUI 3.0圍繞著多裝置開發，還提供了多維度的方案，進一步簡化開發：

（1）基礎能力層：包括基礎的分層引數配置（比如色彩、字號、圓角、間距等），柵格系統，原子化佈局能力（比如拉伸、折行、隱藏等）。

（2）零部件元件層：包括多型控制元件，統一互動能力，以及在此基礎上的元件組合。

（3）面向典型場景：提供分類的頁面組合模板以及示例程式碼。

關於多裝置開發，後面我們會有更詳細的文章介紹，請大家持續關注。

5 . 實時預覽機制

整個開發流程中還有一個很重要的方面——預覽能力，即可以在PC上透過IDE（整合開發環境）就可以實時看到應用的渲染效果，而無需透過具體裝置來部署執行。預覽的關鍵需求主要包括：

（1）一致性渲染：和目標裝置一致的UI呈現效果。

（2）實時預覽&雙向預覽：改動相應的程式碼，實時呈現出相應UI效果。另外，程式碼能夠和UI雙向聯動，程式碼改動的同時UI也實時變更，UI改動的同時程式碼也相應地變更。

（3）多維度預覽：頁面級預覽、元件級預覽、多裝置預覽。

以上這些能力都需要UI程式設計框架具備相應的基礎設施才能達成。ArkUI 3.0的預覽器的整體架構如下圖所示：

圖7 ArkUI 3.0的預覽器架構

ArkUI 3.0基於底層的畫布透過自繪製實現了不同平臺上一致化的渲染體驗，並透過渲染側的跨平臺對接層完成了整體渲染效果。另外，ArkUI 3.0透過實時程式碼變化檢測和增量編譯機制，再配合前面所提到的高效渲染效能，實現了實時編寫預覽。

透過ArkUI 3.0的基礎設施，結合IDE視覺化工具（即預覽器前端），就實現了上面的實時預覽、雙向預覽等能力，進一步提升了開發者的開發效率。

四、結束語

總體而言，UI程式設計框架在應用開發中起了至關重要的作用。目前，擁有全新開發正規化的新一代的UI框架——ArkUI 3.0走出了堅實的第一步，並已開始支撐更多的關鍵應用。接下來，除了基礎設施的持續完善，我們會重點支援生態擴充套件，主要包括高階UI能力的提升，比如三方地圖，遊戲的融合，以及Web能力增強等。同時，我們也會圍繞跨裝置、效能體驗持續地創新。歡迎廣大的開發者加入進來，一起探索，一起改進，共建萬物互聯的應用生態！未來，有跡可循！