ArkUI框架簡(jiǎn)化代碼的“秘密”

在傳統(tǒng)的開(kāi)發(fā)過(guò)程中，總有個(gè)問(wèn)題在困擾我：如何實(shí)現(xiàn)前端view與后端數(shù)據(jù)的同步更改？例如：在某個(gè)視頻類app的頁(yè)面，如果我想要實(shí)現(xiàn)視頻的點(diǎn)擊播放功能，需要怎么樣進(jìn)行呢？

如果我使用傳統(tǒng)的命令式開(kāi)發(fā)框架去實(shí)現(xiàn)，容易造成的麻煩在于，每次后端的數(shù)據(jù)發(fā)生更改，我都需要手動(dòng)更新前端view。

為了解決這個(gè)問(wèn)題，我便在ArkUI上實(shí)現(xiàn)了同樣的功能，神奇的事情發(fā)生了，瞬間代碼干凈了很多，只用幾行代碼就實(shí)現(xiàn)了相同的功能。

于是我搜索了一下ArkUI有什么優(yōu)勢(shì)。發(fā)現(xiàn)很重要的一個(gè)原因：ArkUI使用了聲明式UI開(kāi)發(fā)框架，同時(shí)在UI描述上運(yùn)用了可以和語(yǔ)言運(yùn)行時(shí)深度結(jié)合的自研語(yǔ)言ArkTS。

聲明式框架的“廬山真面目”

這里肯定會(huì)有小伙伴提出疑問(wèn)：什么是聲明式開(kāi)發(fā)框架？在介紹之前，我們先了解一下傳統(tǒng)的命令式開(kāi)發(fā)框架思路，作為一個(gè)程序員，一旦我想要更改View，就需要先更改View對(duì)應(yīng)的Data,然后再更改View的顯示內(nèi)容。

而聲明式開(kāi)發(fā)框架則不同，ArkUI的聲明式框架框架更為高效，可以讓data與前端view同步更新數(shù)據(jù)。

那ArkUI框架是如何實(shí)現(xiàn)同步更新的呢？這個(gè)原理非常簡(jiǎn)單，想象一下我現(xiàn)在要蓋一棟大樓，我需要把項(xiàng)目先交給包工頭，包工頭再把具體的工作分配給工人，工人依據(jù)圖紙建造大樓，當(dāng)圖紙變動(dòng)的時(shí)候，工人也需要按照?qǐng)D紙更改建造動(dòng)作。

與此相對(duì)的，在ArkUI命令式框架內(nèi)部，有兩個(gè)重要的角色，代理和攔截器。

代理可以將目標(biāo)數(shù)據(jù)進(jìn)行代理，并為目標(biāo)數(shù)據(jù)綁定到攔截器上。而攔截器會(huì)監(jiān)聽(tīng)目標(biāo)數(shù)據(jù)的變化，當(dāng)數(shù)據(jù)更新時(shí)，攔截器就會(huì)重寫(xiě)數(shù)據(jù)的set方法，同時(shí)自動(dòng)更新數(shù)據(jù)對(duì)應(yīng)的前端頁(yè)面，整個(gè)過(guò)程不需要程序員進(jìn)行手動(dòng)命令更新。

原子布局能力實(shí)現(xiàn)頁(yè)面布局一致性

聲明式開(kāi)發(fā)框架成功解決了傳統(tǒng)開(kāi)發(fā)過(guò)程中，代碼冗長(zhǎng)的問(wèn)題。但是在了解聲明式開(kāi)發(fā)框架的過(guò)程中，我想到一個(gè)問(wèn)題：有沒(méi)有方法，讓我開(kāi)發(fā)一次代碼，就可以在多個(gè)設(shè)備上適配呢？

ArkUI就提供了這一功能，于是我動(dòng)手試了一下。當(dāng)設(shè)備尺寸變寬時(shí)，我可以通過(guò)原子布局的均分能力去實(shí)現(xiàn)頁(yè)面布局的一致性，也可以通過(guò)柵格布局，去解決多尺寸多設(shè)備的動(dòng)態(tài)布局問(wèn)題。

剛剛提到的原子布局能力包含均分能力，折行能力，拉伸能力，縮放能力，延伸能力，占比能力和隱藏能力?？梢詭椭覀?cè)诓煌O(shè)備上保持體驗(yàn)的一致性。這樣自適應(yīng)的問(wèn)題解決了。

針對(duì)設(shè)備獨(dú)有的特性，比如平板適配左側(cè)導(dǎo)航欄，這個(gè)有什么方法實(shí)現(xiàn)呢？這里我找到了媒體查詢，它可以判斷設(shè)備類型，設(shè)計(jì)出相匹配的布局樣式，同時(shí)還可以監(jiān)聽(tīng)屏幕尺寸動(dòng)態(tài)變化，比如橫豎屏切換可以通過(guò)orientation屬性判斷屏幕橫豎狀態(tài)來(lái)動(dòng)態(tài)適配，另外還支持判斷分屏狀態(tài)、折疊屏展開(kāi)狀態(tài)等，這樣就解決了我一次開(kāi)發(fā)多端部署的難題。

同時(shí)，ArkUI框架為開(kāi)發(fā)者提供了多態(tài)組件，同一控件在不同的設(shè)備上會(huì)呈現(xiàn)出不同的形態(tài)，所以開(kāi)發(fā)者在使用多態(tài)組件時(shí)，無(wú)需考慮設(shè)備差異，只需關(guān)注功能實(shí)現(xiàn)即可。

常用組件

在這里我們總結(jié)了一下常用組件：

常見(jiàn)的容器類組件有列表，彈出框。

展示類組件有文本，進(jìn)度條，事件標(biāo)記和氣泡指示。

導(dǎo)航類組件有Tab頁(yè)簽。

操作類組件有按鈕，下拉選項(xiàng)，選擇器，評(píng)分條，搜索框和菜單。

這樣一來(lái)，我只需要選擇合適的組件進(jìn)行開(kāi)發(fā)，就可以一次開(kāi)發(fā)，多端部署。大大節(jié)省我的開(kāi)發(fā)時(shí)間。

總結(jié)

根據(jù)前文不難看出，ArkUI是一套用于構(gòu)建HarmonyOS應(yīng)用界面的UI開(kāi)發(fā)框架。

我們總結(jié)一下它主要有以下三個(gè)特性：

1、極簡(jiǎn)的UI信息語(yǔ)法

2、支持多設(shè)備開(kāi)發(fā)，一次開(kāi)發(fā)多端部署

3、開(kāi)箱即用的多態(tài)UI組件

從而幫助開(kāi)發(fā)者提升HarmonyOS應(yīng)用界面的開(kāi)發(fā)效率。

END

關(guān)于ArkUI的介紹想了解更多？

請(qǐng)登錄開(kāi)發(fā)者官網(wǎng)！

成為HarmonyOS開(kāi)發(fā)者一員！

想了解更多HarmonyOS技術(shù)？后臺(tái)留言，立刻安排！