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

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"size","attrs":{"size":10}},{"type":"color","attrs":{"color":"#40A9FF","name":"blue"}}],"text":"作者：yuzhiqiang，UI編程框架首席技術專家","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在Harmony 3.0.0開發者預覽版中，包含了新一代的聲明式UI框架ArkUI 3.0、多語言跨平臺編譯器ArkCompiler 3.0、跨端開發工具DevEco Studio3.0，以及基於TS/JS語言的API 7，全面提升開發者體驗。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"本期，我們要爲大家重點介紹HarmonyOS新一代聲明式UI框架ArkUI 3.0。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"一、UI編程框架","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在介紹ArkUI 3.0之前，我們先來簡要了解一下什麼是UI編程框架。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"UI編程框架，是爲應用開發者提供的開發UI的基礎設施，主要包括UI控件（按鈕/列表等），視圖佈局（擺放/排列相應的UI控件），動畫機制（動畫設計以及效果呈現），交互事件處理（點擊/滑動等），以及相應的編程語言和編程模型等。從系統運行的維度來看，UI編程框架也包括一個運行時，負責應用在系統中執行時所需的資源加載、UI渲染和事件響應等。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"總體而言，UI編程框架提供了開發以及運行UI界面所需要的框架能力，主要架構如下圖所示：","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/be/beb97cd37e8eab23c0cdd4c7e84a039c.webp","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","marks":[{"type":"size","attrs":{"size":9}}],"text":"圖1 UI編程框架","attrs":{}}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"開發模型：","attrs":{}},{"type":"text","text":"對開發者提供開發範式、UI控件/佈局/動效/交互、編程語言等。它體現的是開發效率與難易程度。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"運行框架：","attrs":{}},{"type":"text","text":"UI界面渲染及交互的基礎能力框架，包括相應的佈局引擎、控件機制、動效引擎、事件機制、渲染管線等，並結合語言虛擬機和圖形引擎，將開發者的程序運行在具體系統平臺上。它體現的是應用運行的性能體驗。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"平臺適配：","attrs":{}},{"type":"text","text":"承載框架的具體操作系統或平臺適配層。","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"UI編程框架的關鍵需求，主要有以下兩類：","attrs":{}}]},{"type":"numberedlist","attrs":{"start":1,"normalizeStart":1},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"開發效率：","attrs":{}},{"type":"text","text":"包括代碼量、學習曲線、工具、社區、三方庫完備度等。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"性能體驗：","attrs":{}},{"type":"text","text":"包括啓動速度、幀率、響應時延、酷炫效果、資源佔用等。","attrs":{}}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"另外，隨着智能設備的急劇增長，UI編程框架還需要考慮如何更好地適配不同設備的差異性，包括設備形態差異（比如屏幕形狀、尺寸、分辨率、交互模式等），以及設備能力差異（比如內存、CPU、GPU等）。 ","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"二、ArkUI框架的演進","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"爲了更好地滿足開發效率和性能體驗等相關的需求， ArkUI 3.0綜合考慮了UI渲染以及語言和運行時，圍繞着極簡開發、高性能、跨設備跨平臺進一步演進。下圖描述了ArkUI整體架構的演進：","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/00/0029cf6bc24092050dd3c39c08102918.webp","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","marks":[{"type":"size","attrs":{"size":9}}],"text":"圖2 ArkUI框架演進","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"圖的左側是2020年發佈的JS UI框架的架構示意圖。它主要支持類Web的前端開發範式，通過DSL（domain-specific language，領域特定語言）轉換層，跨語言對接到聲明式UI後端引擎，並結合JS引擎完成整體UI渲染。圖的右側是新的ArkUI 3.0框架，","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"主要有以下幾個關鍵的變化：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"（1）引入了新一代的聲明式UI開發範式，實現極簡的UI描述語法。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"（2）設計了統一的前後端扁平化渲染機制，進一步提升UI渲染的性能並降低內存消耗。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"（3）深度結合ArkCompiler 3.0的方舟編譯器和方舟運行時，提升語言的執行性能和跨語言通信能力。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"（4）在工具方面，針對新一代的聲明式UI開發範式構建了新的編譯工具鏈和預覽引擎，提供了所見即所得的實時預覽機制。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"另外，在ArkUI 3.0框架中，類Web範式會繼續保留，即類Web範式和新一代的聲明式UI範式都可以支持，可以各自獨立使用，但不能混用。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"三、ArkUI 3.0的關鍵特性","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"接下來我們展開詳細介紹一下ArkUI 3.0的關鍵特性。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"size","attrs":{"size":12}},{"type":"strong","attrs":{}}],"text":"1. 新一代的聲明式UI開發範式","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"具體而言，ArkUI 3.0中的新一代聲明式UI開發範式，主要特徵如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"（1）基於TypeScript擴展的聲明式UI描述語法，提供了類自然語言的UI描述和組合。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"（2）開箱即用的多態組件。多態是指UI描述是統一的，UI呈現在不同類型設備上會有所不同。比如Button組件在手機和手錶會有不同的樣式和交互方式。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"（3）多維度的狀態管理機制，支持靈活的數據驅動的UI變更。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"下面我們以一個具體的示例來說明新一代聲明式UI開發範式的基本組成。如圖3所示的代碼示例，UI界面會顯示一個“Hello World”的文本和一個“Click me”按鈕。當用戶點擊“Click me”按鈕時，字符串變量myText的值會從“World”變爲“ACE”，文本最終顯示爲“Hello ACE”。","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/1d/1dba164a29cb21ea9b570f0580936dd7.webp","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","marks":[{"type":"size","attrs":{"size":9}}],"text":"圖3 聲明式UI開發範式的基本概念","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"以上示例中所包含的","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"聲明式UI開發範式的基本組成說明如下：","attrs":{}}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"裝飾器：","attrs":{}},{"type":"text","text":"用來裝飾類、結構體、方法以及變量，賦予其特殊的含義，如上述示例中@Entry、@Component、@State都是裝飾器。@Component表示這是個自定義組件；@Entry則表示這是個入口組件；@State表示組件中的狀態變量，這個狀態變化會引起UI變更。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"自定義組件：","attrs":{}},{"type":"text","text":"可複用的UI單元，可組合其它組件，如上述被@Component裝飾的struct Hello。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"UI描述：","attrs":{}},{"type":"text","text":"聲明式的方式來描述UI的結構，如上述build()方法內部的代碼塊。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"內置組件：","attrs":{}},{"type":"text","text":"框架中默認內置的基礎和佈局組件，可直接被開發者調用，比如示例中的Column、Text、Divider、Button。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"事件方法：","attrs":{}},{"type":"text","text":"用於添加組件對事件的響應邏輯，統一通過事件方法進行設置，如跟隨在Button後面的onClick()。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"屬性方法：","attrs":{}},{"type":"text","text":"用於組件屬性的配置，統一通過屬性方法進行設置，如fontSize()、width()、height()、color()等，可通過鏈式調用的方式設置多項屬性。","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上述示例中，用@State裝飾過的變量myText，包含了一個基礎的狀態管理機制，即myText的值的變化，會引起相應的UI變更（Text組件）。ArkUI 3.0還提供多維度的狀態管理機制。和UI相關聯的數據，不僅僅在組件內使用，還可以在不同組件層級間傳遞，比如父子組件之間，爺孫組件之間，也可以是全局範圍內的傳遞，還可以是跨設備傳遞。另外，從數據的傳遞形式來看，可以分爲只讀的單向傳遞和可變更的雙向傳遞。開發者可以靈活的利用這些能力來實現數據和UI的聯動。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"ArkUI採用嵌入式領域特定語言（embedded Domain Specific Language， eDSL）的形式，結合宿主語言能力實現UI開發。通過eDSL，結合語法糖或者語言原生的元編程能力，設計了統一的UI開發範式，並能夠結合不同語言來實現應用的邏輯處理部分。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"size","attrs":{"size":12}},{"type":"strong","attrs":{}}],"text":"2. 關鍵渲染性能","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"下面通過一個簡單的示例代碼，爲大家講述從代碼到UI顯示的整體渲染流程。如圖4所示，此示例會在UI界面顯示一個“Click me”按鈕，按鈕下面同步顯示按鈕的點擊次數。當用戶點擊按鈕時，下面的點擊次數會相應增加。","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/60/60f38baddd376c4830727ac7aee08c09.webp","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","marks":[{"type":"size","attrs":{"size":9}}],"text":"圖4 整體渲染流程","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"整個渲染過程分爲兩個階段：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"（1）初始顯示流程（步驟①~⑤）","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"① 源代碼通過相應的工具鏈，編譯爲帶有類型標誌的目標文件，同時也包含了如何創建UI結構信息的指令流。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"② 通過跨語言調用並生成了C++層Component樹（UI描述層）。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"③ 通過Component樹進一步生成Element樹。Element是Component的實例，表示一個具體的組件節點，它形成的Element樹負責維持界面在整個運行時的樹形結構，方便計算更新時的局部更新算法等。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"④ 對於每個可顯示的Element都會爲其創建對應的RenderNode。RenderNode負責一個節點的顯示信息，它形成的Render樹維護着整個界面渲染需要用到的信息，包括位置、大小、繪製命令等。後續的佈局、繪製都是在Render樹上進行的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"⑤ 實現真正的渲染並顯示繪製結果。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"（2）按鈕被點擊後的顯示流程（步驟⑥~⑪）","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"⑥ 點擊事件傳遞到組件，組件的onClick事件方法被觸發執行。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"⑦ 由於onClick事件方法中@State註解過的變量改變了，相應getter/setter函數會被觸發。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"⑧ 狀態管理模塊定位出關聯的UI組件。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"⑨ 狀態管理模塊更新相應的Element樹的信息。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"⑩ 更新相應的UI組件的渲染信息。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"⑪ 界面顯示，與⑤類似。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"整個渲染過程中所需的關鍵能力，除了極簡的開發範式本身，主要包含以下三個部分：","attrs":{}}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"編譯優化以及跨語言調用。","attrs":{}},{"type":"text","text":"結合目標文件中的類型信息標誌，ArkCompiler會實現相應的代碼優化。另外，ArkCompiler也提供了高效的JS/TS -> C++跨語言調用機制。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"扁平化渲染機制以及小對象組合機制。","attrs":{}},{"type":"text","text":"組件信息的結構在前後端有基本一致的表示，進一步減少了轉換開銷，實現了扁平化的渲染。同時，UI組件內部都是通過輕量化對象來按需組合，內存消耗也進一步降低。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"狀態管理機制。","attrs":{}},{"type":"text","text":"通過監聽變量的存取操作，實現數據變化的自動化感知並計算出相應的最小化UI組件更新範圍，實現高效的UI變更。","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"除此之外，長列表渲染是一種典型的應用場景，裏面可能會涉及到大量的數據，如果處理不當，會引起極大影響性能以及資源佔用。ArkUI 3.0針對這類常用的場景，提供了一種","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"LazyForEach懶加載機制","attrs":{}},{"type":"text","text":"，會自動根據具體情況計算出合適的渲染數據，實現數據的按需加載，從而提升UI刷新效率。LazyForEach可以結合常用的列表類組件（比如List、Grid等）靈活配合使用。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"size","attrs":{"size":12}},{"type":"strong","attrs":{}}],"text":"3. 高級UI組件庫","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"高級的UI組件庫可以進一步助力高效的應用開發。HarmonyOS的歐洲研發團隊基於ArkUI 3.0，構建了一些高階組件示例，比如：常用的圖表類組件、瀑布流佈局組件等。開發者可以通過幾行代碼就可以實現複雜酷炫的UI效果，比如自適應的圖片增刪、行列變化，以及相應的酷炫動效效果。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"示例如下：","attrs":{}}]},{"type":"video","attrs":{"videoHTML":""}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","marks":[{"type":"size","attrs":{"size":9}}],"text":"圖5 圖表組件","attrs":{}}]},{"type":"video","attrs":{"videoHTML":""}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","marks":[{"type":"size","attrs":{"size":9}}],"text":"圖6 瀑布流佈局組件","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"size","attrs":{"size":12}},{"type":"strong","attrs":{}}],"text":"4. 多設備開發","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"除了UI開發套件，ArkUI 3.0圍繞着多設備開發，還提供了多維度的方案，進一步簡化開發：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"（1）基礎能力層：","attrs":{}},{"type":"text","text":"包括基礎的分層參數配置（比如色彩、字號、圓角、間距等），柵格系統，原子化佈局能力（比如拉伸、折行、隱藏等）。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"（2）零部件組件層：","attrs":{}},{"type":"text","text":"包括多態控件，統一交互能力，以及在此基礎上的組件組合。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"（3）面向典型場景：","attrs":{}},{"type":"text","text":"提供分類的頁面組合模板以及示例代碼。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"關於多設備開發，後面我們會有更詳細的文章介紹，請大家持續關注。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"size","attrs":{"size":12}},{"type":"strong","attrs":{}}],"text":"5. 實時預覽機制","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"整個開發流程中還有一個很重要的方面——預覽能力，即可以在PC上通過IDE（集成開發環境）就可以實時看到應用的渲染效果，而無需通過具體設備來部署運行。","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"預覽的關鍵需求主要包括：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"（1）一致性渲染：","attrs":{}},{"type":"text","text":"和目標設備一致的UI呈現效果。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"（2）實時預覽&雙向預覽：","attrs":{}},{"type":"text","text":"改動相應的代碼，實時呈現出相應UI效果。另外，代碼能夠和UI雙向聯動，代碼改動的同時UI也實時變更，UI改動的同時代碼也相應地變更。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"（3）多維度預覽：","attrs":{}},{"type":"text","text":"頁面級預覽、組件級預覽、多設備預覽。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"以上這些能力都需要UI編程框架具備相應的基礎設施才能達成。ArkUI 3.0的預覽器的整體架構如下圖所示：","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/e3/e3137a5af98c9db4c79c7aa76ca0b4e2.webp","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","marks":[{"type":"size","attrs":{"size":9}}],"text":"圖7 ArkUI 3.0的預覽器架構","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"ArkUI 3.0基於底層的畫布通過自繪製實現了不同平臺上一致化的渲染體驗，並通過渲染側的跨平臺對接層完成了整體渲染效果。另外，ArkUI 3.0通過實時代碼變化檢測和增量編譯機制，再配合前面所提到的高效渲染性能，實現了實時編寫預覽。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"通過ArkUI 3.0的基礎設施，結合IDE可視化工具（即預覽器前端），就實現了上面的實時預覽、雙向預覽等能力，進一步提升了開發者的開發效率。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"四、結束語","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"總體而言，UI編程框架在應用開發中起了至關重要的作用。目前，擁有全新開發範式的新一代的UI框架——ArkUI 3.0走出了堅實的第一步，並已開始支撐更多的關鍵應用。接下來，除了基礎設施的持續完善，我們會重點支持生態擴展，主要包括高級UI能力的提升，比如三方地圖，遊戲的融合，以及Web能力增強等。同時，我們也會圍繞跨設備、性能體驗持續地創新。歡迎廣大的開發者加入進來，一起探索，一起改進，共建萬物互聯的應用生態！未來，有跡可循！","attrs":{}}]}]}