作者:yuzhiqiang,UI編程框架首席技術(shù)專家
在Harmony 3.0.0開(kāi)發(fā)者預(yù)覽版中,包含了新一代的聲明式UI框架ArkUI 3.0、多語(yǔ)言跨平臺(tái)編譯器ArkCompiler 3.0、跨端開(kāi)發(fā)工具DevEco Studio3.0,以及基于TS/JS語(yǔ)言的API 7,全面提升開(kāi)發(fā)者體驗(yàn)。
本期,我們要為大家重點(diǎn)介紹HarmonyOS新一代聲明式UI框架ArkUI 3.0。
一、UI編程框架
在介紹ArkUI 3.0之前,我們先來(lái)簡(jiǎn)要了解一下什么是UI編程框架。
UI編程框架,是為應(yīng)用開(kāi)發(fā)者提供的開(kāi)發(fā)UI的基礎(chǔ)設(shè)施,主要包括UI控件(按鈕/列表等),視圖布局(擺放/排列相應(yīng)的UI控件),動(dòng)畫機(jī)制(動(dòng)畫設(shè)計(jì)以及效果呈現(xiàn)),交互事件處理(點(diǎn)擊/滑動(dòng)等),以及相應(yīng)的編程語(yǔ)言和編程模型等。從系統(tǒng)運(yùn)行的維度來(lái)看,UI編程框架也包括一個(gè)運(yùn)行時(shí),負(fù)責(zé)應(yīng)用在系統(tǒng)中執(zhí)行時(shí)所需的資源加載、UI渲染和事件響應(yīng)等。
總體而言,UI編程框架提供了開(kāi)發(fā)以及運(yùn)行UI界面所需要的框架能力,主要架構(gòu)如下圖所示:
圖1 UI編程框架
開(kāi)發(fā)模型:對(duì)開(kāi)發(fā)者提供開(kāi)發(fā)范式、UI控件/布局/動(dòng)效/交互、編程語(yǔ)言等。它體現(xiàn)的是開(kāi)發(fā)效率與難易程度。
運(yùn)行框架:UI界面渲染及交互的基礎(chǔ)能力框架,包括相應(yīng)的布局引擎、控件機(jī)制、動(dòng)效引擎、事件機(jī)制、渲染管線等,并結(jié)合語(yǔ)言虛擬機(jī)和圖形引擎,將開(kāi)發(fā)者的程序運(yùn)行在具體系統(tǒng)平臺(tái)上。它體現(xiàn)的是應(yīng)用運(yùn)行的性能體驗(yàn)。
平臺(tái)適配:承載框架的具體操作系統(tǒng)或平臺(tái)適配層。
UI編程框架的關(guān)鍵需求,主要有以下兩類:
(1)開(kāi)發(fā)效率:包括代碼量、學(xué)習(xí)曲線、工具、社區(qū)、三方庫(kù)完備度等。
(2)性能體驗(yàn):包括啟動(dòng)速度、幀率、響應(yīng)時(shí)延、酷炫效果、資源占用等。
另外,隨著智能設(shè)備的急劇增長(zhǎng),UI編程框架還需要考慮如何更好地適配不同設(shè)備的差異性,包括設(shè)備形態(tài)差異(比如屏幕形狀、尺寸、分辨率、交互模式等),以及設(shè)備能力差異(比如內(nèi)存、CPU、GPU等)。
二、ArkUI框架的演進(jìn)
為了更好地滿足開(kāi)發(fā)效率和性能體驗(yàn)等相關(guān)的需求, ArkUI 3.0綜合考慮了UI渲染以及語(yǔ)言和運(yùn)行時(shí),圍繞著極簡(jiǎn)開(kāi)發(fā)、高性能、跨設(shè)備跨平臺(tái)進(jìn)一步演進(jìn)。下圖描述了ArkUI整體架構(gòu)的演進(jìn):
圖2 ArkUI框架演進(jìn)
圖的左側(cè)是2020年發(fā)布的JS UI框架的架構(gòu)示意圖。它主要支持類Web的前端開(kāi)發(fā)范式,通過(guò)DSL(domain-specific language,領(lǐng)域特定語(yǔ)言)轉(zhuǎn)換層,跨語(yǔ)言對(duì)接到聲明式UI后端引擎,并結(jié)合JS引擎完成整體UI渲染。圖的右側(cè)是新的ArkUI 3.0框架,主要有以下幾個(gè)關(guān)鍵的變化:
(1)引入了新一代的聲明式UI開(kāi)發(fā)范式,實(shí)現(xiàn)極簡(jiǎn)的UI描述語(yǔ)法。
(2)設(shè)計(jì)了統(tǒng)一的前后端扁平化渲染機(jī)制,進(jìn)一步提升UI渲染的性能并降低內(nèi)存消耗。
(3)深度結(jié)合ArkCompiler 3.0的方舟編譯器和方舟運(yùn)行時(shí),提升語(yǔ)言的執(zhí)行性能和跨語(yǔ)言通信能力。
(4)在工具方面,針對(duì)新一代的聲明式UI開(kāi)發(fā)范式構(gòu)建了新的編譯工具鏈和預(yù)覽引擎,提供了所見(jiàn)即所得的實(shí)時(shí)預(yù)覽機(jī)制。
另外,在ArkUI 3.0框架中,類Web范式會(huì)繼續(xù)保留,即類Web范式和新一代的聲明式UI范式都可以支持,可以各自獨(dú)立使用,但不能混用。
三、ArkUI 3.0的關(guān)鍵特性
接下來(lái)我們展開(kāi)詳細(xì)介紹一下ArkUI 3.0的關(guān)鍵特性。
1. 新一代的聲明式UI開(kāi)發(fā)范式
具體而言,ArkUI 3.0中的新一代聲明式UI開(kāi)發(fā)范式,主要特征如下:
(1)基于TypeScript擴(kuò)展的聲明式UI描述語(yǔ)法,提供了類自然語(yǔ)言的UI描述和組合。
(2)開(kāi)箱即用的多態(tài)組件。多態(tài)是指UI描述是統(tǒng)一的,UI呈現(xiàn)在不同類型設(shè)備上會(huì)有所不同。比如Button組件在手機(jī)和手表會(huì)有不同的樣式和交互方式。
(3)多維度的狀態(tài)管理機(jī)制,支持靈活的數(shù)據(jù)驅(qū)動(dòng)的UI變更。
下面我們以一個(gè)具體的示例來(lái)說(shuō)明新一代聲明式UI開(kāi)發(fā)范式的基本組成。如圖3所示的代碼示例,UI界面會(huì)顯示一個(gè)“Hello World”的文本和一個(gè)“Click me”按鈕。當(dāng)用戶點(diǎn)擊“Click me”按鈕時(shí),字符串變量myText的值會(huì)從“World”變?yōu)椤?a target="_blank">ACE”,文本最終顯示為“Hello ACE”。
圖3 聲明式UI開(kāi)發(fā)范式的基本概念
以上示例中所包含的聲明式UI開(kāi)發(fā)范式的基本組成說(shuō)明如下:
裝飾器:用來(lái)裝飾類、結(jié)構(gòu)體、方法以及變量,賦予其特殊的含義,如上述示例中@Entry、@Component、@State都是裝飾器。@Component表示這是個(gè)自定義組件;@Entry則表示這是個(gè)入口組件;@State表示組件中的狀態(tài)變量,這個(gè)狀態(tài)變化會(huì)引起UI變更。
自定義組件:可復(fù)用的UI單元,可組合其它組件,如上述被@Component裝飾的struct Hello。
UI描述:聲明式的方式來(lái)描述UI的結(jié)構(gòu),如上述build()方法內(nèi)部的代碼塊。
內(nèi)置組件:框架中默認(rèn)內(nèi)置的基礎(chǔ)和布局組件,可直接被開(kāi)發(fā)者調(diào)用,比如示例中的Column、Text、Divider、Button。
事件方法:用于添加組件對(duì)事件的響應(yīng)邏輯,統(tǒng)一通過(guò)事件方法進(jìn)行設(shè)置,如跟隨在Button后面的onClick()。
屬性方法:用于組件屬性的配置,統(tǒng)一通過(guò)屬性方法進(jìn)行設(shè)置,如fontSize()、width()、height()、color()等,可通過(guò)鏈?zhǔn)秸{(diào)用的方式設(shè)置多項(xiàng)屬性。
上述示例中,用@State裝飾過(guò)的變量myText,包含了一個(gè)基礎(chǔ)的狀態(tài)管理機(jī)制,即myText的值的變化,會(huì)引起相應(yīng)的UI變更(Text組件)。ArkUI 3.0還提供多維度的狀態(tài)管理機(jī)制。和UI相關(guān)聯(lián)的數(shù)據(jù),不僅僅在組件內(nèi)使用,還可以在不同組件層級(jí)間傳遞,比如父子組件之間,爺孫組件之間,也可以是全局范圍內(nèi)的傳遞,還可以是跨設(shè)備傳遞。另外,從數(shù)據(jù)的傳遞形式來(lái)看,可以分為只讀的單向傳遞和可變更的雙向傳遞。開(kāi)發(fā)者可以靈活的利用這些能力來(lái)實(shí)現(xiàn)數(shù)據(jù)和UI的聯(lián)動(dòng)。
ArkUI采用嵌入式領(lǐng)域特定語(yǔ)言(embedded Domain Specific Language, eDSL)的形式,結(jié)合宿主語(yǔ)言能力實(shí)現(xiàn)UI開(kāi)發(fā)。通過(guò)eDSL,結(jié)合語(yǔ)法糖或者語(yǔ)言原生的元編程能力,設(shè)計(jì)了統(tǒng)一的UI開(kāi)發(fā)范式,并能夠結(jié)合不同語(yǔ)言來(lái)實(shí)現(xiàn)應(yīng)用的邏輯處理部分。
2. 關(guān)鍵渲染性能
下面通過(guò)一個(gè)簡(jiǎn)單的示例代碼,為大家講述從代碼到UI顯示的整體渲染流程。如圖4所示,此示例會(huì)在UI界面顯示一個(gè)“Click me”按鈕,按鈕下面同步顯示按鈕的點(diǎn)擊次數(shù)。當(dāng)用戶點(diǎn)擊按鈕時(shí),下面的點(diǎn)擊次數(shù)會(huì)相應(yīng)增加。
圖4 整體渲染流程
整個(gè)渲染過(guò)程分為兩個(gè)階段:
(1)初始顯示流程(步驟①~⑤)
① 源代碼通過(guò)相應(yīng)的工具鏈,編譯為帶有類型標(biāo)志的目標(biāo)文件,同時(shí)也包含了如何創(chuàng)建UI結(jié)構(gòu)信息的指令流。
② 通過(guò)跨語(yǔ)言調(diào)用并生成了C++層Component樹(shù)(UI描述層)。
③ 通過(guò)Component樹(shù)進(jìn)一步生成Element樹(shù)。Element是Component的實(shí)例,表示一個(gè)具體的組件節(jié)點(diǎn),它形成的Element樹(shù)負(fù)責(zé)維持界面在整個(gè)運(yùn)行時(shí)的樹(shù)形結(jié)構(gòu),方便計(jì)算更新時(shí)的局部更新算法等。
④ 對(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é)果。
(2)按鈕被點(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組件的渲染信息。
? 界面顯示,與⑤類似。
整個(gè)渲染過(guò)程中所需的關(guān)鍵能力,除了極簡(jiǎn)的開(kāi)發(fā)范式本身,主要包含以下三個(gè)部分:
編譯優(yōu)化以及跨語(yǔ)言調(diào)用。結(jié)合目標(biāo)文件中的類型信息標(biāo)志,ArkCompiler會(huì)實(shí)現(xiàn)相應(yīng)的代碼優(yōu)化。另外,ArkCompiler也提供了高效的JS/TS -》 C++跨語(yǔ)言調(diào)用機(jī)制。
扁平化渲染機(jī)制以及小對(duì)象組合機(jī)制。組件信息的結(jié)構(gòu)在前后端有基本一致的表示,進(jìn)一步減少了轉(zhuǎn)換開(kāi)銷,實(shí)現(xiàn)了扁平化的渲染。同時(shí),UI組件內(nèi)部都是通過(guò)輕量化對(duì)象來(lái)按需組合,內(nèi)存消耗也進(jìn)一步降低。
狀態(tài)管理機(jī)制。通過(guò)監(jiān)聽(tīng)變量的存取操作,實(shí)現(xiàn)數(shù)據(jù)變化的自動(dòng)化感知并計(jì)算出相應(yīng)的最小化UI組件更新范圍,實(shí)現(xiàn)高效的UI變更。
除此之外,長(zhǎng)列表渲染是一種典型的應(yīng)用場(chǎng)景,里面可能會(huì)涉及到大量的數(shù)據(jù),如果處理不當(dāng),會(huì)引起極大影響性能以及資源占用。ArkUI 3.0針對(duì)這類常用的場(chǎng)景,提供了一種LazyForEach懶加載機(jī)制,會(huì)自動(dòng)根據(jù)具體情況計(jì)算出合適的渲染數(shù)據(jù),實(shí)現(xiàn)數(shù)據(jù)的按需加載,從而提升UI刷新效率。LazyForEach可以結(jié)合常用的列表類組件(比如List、Grid等)靈活配合使用。
3. 高級(jí)UI組件庫(kù)高級(jí)的UI組件庫(kù)可以進(jìn)一步助力高效的應(yīng)用開(kāi)發(fā)。HarmonyOS的歐洲研發(fā)團(tuán)隊(duì)基于ArkUI 3.0,構(gòu)建了一些高階組件示例,比如:常用的圖表類組件、瀑布流布局組件等。開(kāi)發(fā)者可以通過(guò)幾行代碼就可以實(shí)現(xiàn)復(fù)雜酷炫的UI效果,比如自適應(yīng)的圖片增刪、行列變化,以及相應(yīng)的酷炫動(dòng)效效果。
4. 多設(shè)備開(kāi)發(fā)
除了UI開(kāi)發(fā)套件,ArkUI 3.0圍繞著多設(shè)備開(kāi)發(fā),還提供了多維度的方案,進(jìn)一步簡(jiǎn)化開(kāi)發(fā):
(1)基礎(chǔ)能力層:包括基礎(chǔ)的分層參數(shù)配置(比如色彩、字號(hào)、圓角、間距等),柵格系統(tǒng),原子化布局能力(比如拉伸、折行、隱藏等)。
(2)零部件組件層:包括多態(tài)控件,統(tǒng)一交互能力,以及在此基礎(chǔ)上的組件組合。
(3)面向典型場(chǎng)景:提供分類的頁(yè)面組合模板以及示例代碼。
關(guān)于多設(shè)備開(kāi)發(fā),后面我們會(huì)有更詳細(xì)的文章介紹,請(qǐng)大家持續(xù)關(guān)注。
5. 實(shí)時(shí)預(yù)覽機(jī)制
整個(gè)開(kāi)發(fā)流程中還有一個(gè)很重要的方面——預(yù)覽能力,即可以在PC上通過(guò)IDE(集成開(kāi)發(fā)環(huán)境)就可以實(shí)時(shí)看到應(yīng)用的渲染效果,而無(wú)需通過(guò)具體設(shè)備來(lái)部署運(yùn)行。預(yù)覽的關(guān)鍵需求主要包括:
(1)一致性渲染:和目標(biāo)設(shè)備一致的UI呈現(xiàn)效果。
(2)實(shí)時(shí)預(yù)覽&雙向預(yù)覽:改動(dòng)相應(yīng)的代碼,實(shí)時(shí)呈現(xiàn)出相應(yīng)UI效果。另外,代碼能夠和UI雙向聯(lián)動(dòng),代碼改動(dòng)的同時(shí)UI也實(shí)時(shí)變更,UI改動(dòng)的同時(shí)代碼也相應(yīng)地變更。
(3)多維度預(yù)覽:頁(yè)面級(jí)預(yù)覽、組件級(jí)預(yù)覽、多設(shè)備預(yù)覽。
以上這些能力都需要UI編程框架具備相應(yīng)的基礎(chǔ)設(shè)施才能達(dá)成。ArkUI 3.0的預(yù)覽器的整體架構(gòu)如下圖所示:
圖7 ArkUI 3.0的預(yù)覽器架構(gòu)
ArkUI 3.0基于底層的畫布通過(guò)自繪制實(shí)現(xiàn)了不同平臺(tái)上一致化的渲染體驗(yàn),并通過(guò)渲染側(cè)的跨平臺(tái)對(duì)接層完成了整體渲染效果。另外,ArkUI 3.0通過(guò)實(shí)時(shí)代碼變化檢測(cè)和增量編譯機(jī)制,再配合前面所提到的高效渲染性能,實(shí)現(xiàn)了實(shí)時(shí)編寫預(yù)覽。
通過(guò)ArkUI 3.0的基礎(chǔ)設(shè)施,結(jié)合IDE可視化工具(即預(yù)覽器前端),就實(shí)現(xiàn)了上面的實(shí)時(shí)預(yù)覽、雙向預(yù)覽等能力,進(jìn)一步提升了開(kāi)發(fā)者的開(kāi)發(fā)效率。
四、結(jié)束語(yǔ)
總體而言,UI編程框架在應(yīng)用開(kāi)發(fā)中起了至關(guān)重要的作用。目前,擁有全新開(kāi)發(fā)范式的新一代的UI框架——ArkUI 3.0走出了堅(jiān)實(shí)的第一步,并已開(kāi)始支撐更多的關(guān)鍵應(yīng)用。接下來(lái),除了基礎(chǔ)設(shè)施的持續(xù)完善,我們會(huì)重點(diǎn)支持生態(tài)擴(kuò)展,主要包括高級(jí)UI能力的提升,比如三方地圖,游戲的融合,以及Web能力增強(qiáng)等。同時(shí),我們也會(huì)圍繞跨設(shè)備、性能體驗(yàn)持續(xù)地創(chuàng)新。歡迎廣大的開(kāi)發(fā)者加入進(jìn)來(lái),一起探索,一起改進(jìn),共建萬(wàn)物互聯(lián)的應(yīng)用生態(tài)!未來(lái),有跡可循!
編輯:jq
-
IDE
+關(guān)注
關(guān)注
0文章
347瀏覽量
47502 -
ui
+關(guān)注
關(guān)注
0文章
206瀏覽量
21687 -
HarmonyOS
+關(guān)注
關(guān)注
79文章
2055瀏覽量
32174
原文標(biāo)題:HDC技術(shù)分論壇:HarmonyOS新一代UI框架的全面解讀
文章出處:【微信號(hào):HarmonyOS_Community,微信公眾號(hào):電子發(fā)燒友開(kāi)源社區(qū)】歡迎添加關(guān)注!文章轉(zhuǎn)載請(qǐng)注明出處。
發(fā)布評(píng)論請(qǐng)先 登錄
新一代光纖涂覆機(jī)
寶馬發(fā)布全新一代智能電子電氣架構(gòu)
新一代溝槽輔助平面SiC MOSFETS

HarmonyOS開(kāi)發(fā)指導(dǎo)類文檔更新速遞(上)

亞馬遜云科技發(fā)布新一代Amazon SageMaker
HarmonyOS NEXT應(yīng)用元服務(wù)開(kāi)發(fā)Intents Kit(意圖框架服務(wù))綜述
HarmonyOS NEXT應(yīng)用元服務(wù)開(kāi)發(fā)Intents Kit(意圖框架服務(wù))習(xí)慣推薦方案概述
中興努比亞、紅魔與京東方聯(lián)合發(fā)布全新一代真全面屏
HarmonyOS NEXT應(yīng)用元服務(wù)開(kāi)發(fā)Intents Kit(意圖框架服務(wù))本地搜索方案概述
傅利葉發(fā)布新一代人形機(jī)器人GR-2
新一代小米手機(jī)智能工廠全面量產(chǎn)
小米新一代智能手機(jī)智能工廠全面投產(chǎn)
學(xué)習(xí)鴻蒙必須要知道的幾個(gè)名詞

評(píng)論