ArkUI 3.0框架能力和開發(fā)工具能力三個方面

HarmonyOS自誕生以來，就是為滿足分布式多設(shè)備應(yīng)用場景而設(shè)計的，大到智慧屏、車機、平板，小到手機、手表。在多設(shè)備場景下進行應(yīng)用UI界面開發(fā)，面臨新的困難與挑戰(zhàn)，如下圖所示：

為了使UI界面在色彩風(fēng)格、屏幕尺寸、交互方式和組件功能等差異下仍能夠正常顯示，無疑需要開發(fā)人員花費大量精力在UI適配。開發(fā)人員常常需要實現(xiàn)多套界面布局（甚至多套工程），來滿足不同設(shè)備間的設(shè)計差異。即使頁面差異不大，也需要進行多設(shè)備測試，多次打包編譯在設(shè)備或者模擬器上運行查看效果。后期維護過程中也需要不斷查看不同設(shè)備下的兼容性，這些都極大地增加了應(yīng)用開發(fā)者的工作量。

為了解決上述問題，簡化開發(fā)者在多設(shè)備上的開發(fā)調(diào)試成本，我們提出了一次開發(fā)多端部署的設(shè)計理念，實現(xiàn)通過一套工程代碼，一次開發(fā)上架，即可按需部署到不同設(shè)備。為了實現(xiàn)這一目標，我們從Harmony系統(tǒng)能力、ArkUI 3.0框架能力和開發(fā)工具能力三個方面，為開發(fā)者提供了多種適配方法和能力。下面將一一為大家介紹。

一、HarmonyOS系統(tǒng)能力

首先介紹一下系統(tǒng)層面提供的能力。系統(tǒng)能力無需開發(fā)者進行頁面調(diào)整，也無需進行業(yè)務(wù)邏輯調(diào)整，僅通過增加簡單的幾行配置描述，即可由系統(tǒng)進行多設(shè)備適配。系統(tǒng)能力與開發(fā)范式無關(guān)，因此在新的UI編程框架下仍可使用。下面我們依次介紹兩種系統(tǒng)能力：模擬小窗和平行視界。

1. 模擬小窗

模擬小窗是最常用也是最簡單的一種多設(shè)備適配方式，通過利用系統(tǒng)的懸浮窗能力，將低分辨率的應(yīng)用，以懸浮窗口的形式在高分辨率屏幕上進行顯示。常見的使用場景是手機應(yīng)用在平板或PC上運行的場景，如下圖所示：

模擬小窗的使用方式非常簡單，只需在項目中config.json文件中增加兩條描述，分別配置好應(yīng)用的目標設(shè)備類型和響應(yīng)的窗口尺寸，即可將低分辨率的應(yīng)用運行在高分辨率設(shè)備上。示例代碼如下：

{ “app”： { 。.. “smartWindowSize”：“360*640”， “smartWindowDeviceType”： ［ “tablet” ］ }， 。..}

這種使用方式能夠良好地保證我們應(yīng)用的展示效果和原始平臺效果是一致的，無需開發(fā)者進行額外的界面的適配。但是這種方式也有局限，最顯著的問題就是沒有辦法利用全部高分辨率的屏幕，整個屏幕內(nèi)展示的數(shù)據(jù)量沒有因屏幕分辨率的增加而增大，造成了屏幕上空間的浪費。為解決此問題，系統(tǒng)提供了另一種適配方案——平行視界。

2. 平行視界

系統(tǒng)針對折疊屏、平板設(shè)備提供了平行視界的能力，借助分屏顯示的思想，將屏幕分為左右兩個部分，分別顯示應(yīng)用相關(guān)聯(lián)的兩個頁面內(nèi)容。這樣每個區(qū)域都能夠保持良好的界面顯示效果，也增加了屏幕內(nèi)的有效數(shù)據(jù)量，良好地利用了屏幕顯示區(qū)域。常用于新聞、購物類的場景，將相關(guān)的兩個頁面同時顯示，如下圖所示：

使用平行視界時，首先需要在config.json文件中配置metaData，聲明支持平行視界。同時，還需要增加easygo.json文件進行頁面路由關(guān)系配置，指導(dǎo)系統(tǒng)進行分屏顯示。

平行視界的詳細使用說明，可參考官網(wǎng)：

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/multi-device-ui-app-multiplier-guidelines-0000001135848428

二、ArkUI 3.0框架能力

上述兩種是通過配置即可實現(xiàn)的多端適配方案，使用簡單，但是使用場景比較受限。為了更加精準地適配多設(shè)備界面，ArkUI 3.0框架提供了媒體查詢、多態(tài)控件、原子布局和柵格系統(tǒng)，方便開發(fā)者選擇合適的能力進行UI界面構(gòu)建。

1. 媒體查詢

媒體查詢是CSS提供的標準能力，是響應(yīng)式Web設(shè)計的關(guān)鍵部分。在新的UI范式中仍保留了此能力，作為最基礎(chǔ)的UI響應(yīng)式設(shè)計能力。在新的UI范式中，通過API接口方式對外提供媒體查詢能力，可以探查的范圍包括頁面尺寸、設(shè)備分辨率、屏幕方向、頁面寬高比、屏幕尺寸、設(shè)備類型、屏幕類型和主題模式。開發(fā)者可以根據(jù)不同的查詢結(jié)果，進行定制化處理。比如：當(dāng)屏幕方向變化時，可以調(diào)整界面內(nèi)布局樣式和組件顯示效果；也可以根據(jù)設(shè)備類型不同，控制組件的顯示和隱藏；并且當(dāng)查詢狀態(tài)發(fā)生變化時，提供事件通知。

2. 多態(tài)組件

UI界面構(gòu)建離不開組件的使用。ArkUI 3.0框架為開發(fā)者提供了多態(tài)組件，通過組件將不同設(shè)備的樣式風(fēng)格和交互方式進行封裝，替開發(fā)者完成大部分適配相關(guān)工作。開發(fā)者在使用多態(tài)組件時，無需考慮設(shè)備差異，只需關(guān)注功能實現(xiàn)即可。

下面通過一個示例來看看，相同的一套開發(fā)代碼在手機、智慧屏和車機上展示的不同效果。

示例代碼如下：

Column（） { Text（“手機 / 平板”） .margin（{top： 150}） Button（“普通按鈕”） .margin（{top： 40}） .onClick（（） =》 { AlertDialog.show（{title： ‘發(fā)現(xiàn)新版本’， message： ‘當(dāng)前使用移動數(shù)據(jù)網(wǎng)絡(luò)，將消耗 XXX MB流量，是否更新’， primaryButton： { value： ‘立即更新’， action： （） =》 {} }， secondaryButton： { value： ‘以后再說’， action： （） =》 {} }}） }）}

（左右滑動，查看更多）

產(chǎn)品設(shè)計人員常常不滿足于使用系統(tǒng)默認樣式，希望能夠針對不同的平臺使用自定義的風(fēng)格樣式。為了避免開發(fā)者逐個組件地進行樣式調(diào)整，ArkUI 3.0框架將組件樣式相關(guān)設(shè)置信息（如顏色、尺寸、圓角弧度、內(nèi)容文本等）抽象出來形成了一個參數(shù)表，按照參數(shù)名稱和參數(shù)值的方式進行映射。UI組件樣式屬性值都來自這張參數(shù)表，開發(fā)者和設(shè)計人員只需調(diào)整參數(shù)值，即可調(diào)整組件的顯示效果。

3. 原子布局

多設(shè)備間差異最大的還是屏幕的分辨率，差異分辨率適配離不開自適應(yīng)布局的能力。針對常見的開發(fā)場景，我們提煉了七種原子布局能力。這些布局可以獨立使用，也可多種布局疊加使用。下面我們依次介紹這七種原子布局能力：

（1）折行布局：常用于橫豎屏適配或手機向平板切換的場景。比如，豎直方向空間減少，但是水平方向上顯示區(qū)域增加，這時可考慮使用折行布局，將豎直方向的排版變成水平方向。

折行布局利用了Flex布局的折行能力實現(xiàn)，配合布局約束設(shè)置，即可實現(xiàn)折行排布效果。示例代碼如下：

Flex（{direction： FlexDirection.Column， wrap： FlexWrap.Wrap}） { Flex（{justifyContent： FlexAlign.Center， alignItems： ItemAlign.Center}） { Text（“First Content”） .fontColor（Color.White） .fontSize（30） } .constraintSize（{minWidth： ‘50%’， minHeight： ‘50%’， maxWidth： 400}） .backgroundColor（Color.Gray） Flex（{justifyContent： FlexAlign.Center， alignItems： ItemAlign.Center}）
{ Text（“Second Content”） .fontSize（30） .fontColor（Color.White） } .constraintSize（{minWidth： ‘50%’， minHeight： ‘50%’， maxWidth： 400}） .backgroundColor（‘rgb（207， 171， 103）’）

（2）均分布局：常用于內(nèi)容數(shù)量固定、均分顯示的場景，比如工具欄、底部菜單欄等。

示例代碼如下：

@Entry@Componentstruct Index { build（） { Flex（{direction： FlexDirection.Row， alignItems： ItemAlign.Center， justifyContent： FlexAlign.SpaceEvenly}） { Text（‘Hello’） .fontSize（20） .borderColor（Color.Red） .borderWidth（1） Text（‘World’） .fontSize（20） .borderColor（Color.Red） .borderWidth（1） Text（‘Ark’） .fontSize（20） .borderColor（Color.Red） .borderWidth（1） Text（‘UI’） .fontSize（20） .borderColor（Color.Red） .borderWidth（1） } .width（‘100%’） .height（‘100%’） }}

（左右滑動，查看更多）

僅需配置為FlexAlign.SpaceEvenly模式，即可在Flex組件中將內(nèi)容均分顯示。

（3）隱藏布局：是一種比較高級的布局方式，常用于分辨率變化較大，且不同分辨率下顯示內(nèi)容有所差異的場景。主要思想是通過增加或減少顯示內(nèi)容，來保持最佳的顯示效果。比如媒體播放控制器，在寬屏場景可以完整顯示全部控制項（包含播放、暫停、上一首、下一首、快進、快退，可能還有點贊和收藏按鈕等），而在低分辨率場景只保留部分控制項（比如播放、暫停、上一首、下一首按鈕）。

隱藏布局使用方式非常簡單，只需通過displayPriority方法設(shè)置顯示優(yōu)先級，具有相同優(yōu)先級的元素會同時顯示或隱藏。在進行布局計算時，會根據(jù)當(dāng)前可用空間，計算當(dāng)前可顯示組件進行顯示。示例代碼如下：

Row（{space： 10}） { Text（‘1’） .width（100） .textAlign（TextAlign.Center） .fontSize（40） .backgroundColor（Color.Red） .displayPriority（2） Text（‘2’） .width（100） .fontSize（40） .textAlign（TextAlign.Center） .backgroundColor（Color.Red） .displayPriority（1） Text（‘3’） .width（100） .textAlign（TextAlign.Center） .fontSize（40） .backgroundColor（Color.Red） .displayPriority（3） Text（‘4’） .width（100） .textAlign（TextAlign.Center） .fontSize（40） .backgroundColor（Color.Red） .displayPriority（1） Text（‘5’） .width（100） .textAlign（TextAlign.Center） .fontSize（40） .backgroundColor（Color.Red） .displayPriority（2）}

（4）占比布局：是一種很常見的布局，就是根據(jù)容器尺寸按照比例進行顯示。

通過設(shè)置百分比尺寸，即可實現(xiàn)比例調(diào)整。示例代碼如下：

@Entry@Componentstruct Index { build（） { Row（） { Text（‘Hello’） .fontSize（20） .width（‘50%’） .backgroundColor（Color.Red） Text（‘World’） .fontSize（20） .width（‘20%’） .backgroundColor（Color.Yellow） Text（‘Ark’） .fontSize（20） .width（‘15%’） .backgroundColor（Color.Green） Text（‘UI’） .fontSize（20） .width（‘15%’） .backgroundColor（Color.Gray） } .width（‘100%’） .height（‘100%’） }}

（左右滑動，查看更多）

（5）拉伸縮放布局：組件尺寸跟隨父容器尺寸變化，產(chǎn)生拉伸或縮放的展示效果。

通過設(shè)置相對容器的比例，實現(xiàn)拉伸或縮放的展示效果。示例代碼如下：

Row（） { Image（$r（‘a(chǎn)pp.media.background’）） .objectFit（ImageFit.Fill） .width（‘100%’） .height（‘100%’） }

（左右滑動，查看更多）

（6）固定寬高比布局：在拉伸縮放時保持自身寬高比，通常用于圖片縮放場景中，可保持圖片顯示效果正常，避免圖片被拉長或壓癟，引起顯示失真。

圖11 固定寬高比布局

通過設(shè)置寬高比，保持按照固定寬高比進行拉伸顯示，保障圖片不會產(chǎn)生變形。示例代碼如下：

Row（） { Image（$r（‘a(chǎn)pp.media.background’）） .objectFit（ImageFit.Fill） .width（‘100%’） .height（‘100%’） .aspectRatio（1.2）}

）

（7）延伸布局：根據(jù)尺寸調(diào)整內(nèi)容顯示數(shù)量，主要是通過像列表這樣的能力來實現(xiàn)。

根據(jù)寬度不同，顯示不同數(shù)量的內(nèi)容，并且可以通過滑動操作，顯示出更多內(nèi)容。示例代碼如下：

@Entry@Componentstruct Index { private data： string［］ = ［‘Hello’， ‘World’， ‘Ark’， ‘UI’， ‘This’， ‘Is’， ‘Layout’， ‘Demo’］ build（） { Flex（{direction:FlexDirection.Column， justifyContent： FlexAlign.Center}） { List（{space： 10}） { ForEach（this.data， （item） =》 { ListItem（） { Text（item） .fontSize（20） .width（80） }.height（80） .backgroundColor（Color.Red） }） } .listDirection（Axis.Horizontal） .width（‘100%’） .height（100） } .width（‘100%’） .height（‘100%’） }}

（左右滑動，查看更多）

此示例通過List作為布局容器，進行內(nèi)容線性排布，并支持滑動響應(yīng)。

4. 柵格系統(tǒng)

ArkUI 3.0框架還提供了完整的柵格系統(tǒng)。所謂柵格系統(tǒng)是來自UX設(shè)計中的柵格設(shè)計，將屏幕寬度按照不同數(shù)量的柵格劃分為不同的列，組件的尺寸占用一個或多個柵格。采用這種方式進行設(shè)計的布局系統(tǒng)，稱之為柵格系統(tǒng)。使用柵格系統(tǒng)，可以屏蔽屏幕分辨率的差異，在不同分辨率的屏幕上保持顯示內(nèi)容的相對尺寸一致。

常見的柵格系統(tǒng)有8柵格系統(tǒng)和12柵格系統(tǒng)，而我們提供的是動態(tài)柵格系統(tǒng)，可以根據(jù)不同的屏幕尺寸，動態(tài)地調(diào)整柵格數(shù)量。使用動態(tài)柵格系統(tǒng)時，不同分辨率的設(shè)備使用不同的柵格配置，比如：手機豎屏采用4柵格系統(tǒng)，手機橫屏和折疊屏采用8柵格系統(tǒng)，大屏采用12柵格系統(tǒng)。

為了方便開發(fā)者使用，ArkUI 3.0框架提供了柵格布局容器GridContainer。下面我們來看一個示例，代碼如下：

Stack（） { GridContainer（{sizeType： SizeType.Auto}） { Row（） { Button（‘OK’） .fontSize（30） .gridSpan（2） .useSizeType（{lg： 4}） } }}

柵格布局容器可以設(shè)置為固定柵格數(shù)，也可以設(shè)置為Auto模式。此示例采用的是Auto模式，柵格布局容器會根據(jù)寬度動態(tài)調(diào)整柵格數(shù)量。同時通過useSizeType屬性方法，可以設(shè)置在不同柵格模式下，組件占用的柵格數(shù)量。比如：“.useSizeType（{lg： 4}）”表示在large柵格系統(tǒng)（即12柵格系統(tǒng)）中，Button組件寬度占用4柵格顯示。

因此，此示例在手機和平板上的顯示效果如下：

三、開發(fā)工具能力

除了上面的系統(tǒng)能力和ArkUI 3.0框架能力外，我們還從開發(fā)工具（DevEco Studio）方面，為開發(fā)者提供了各種各樣的開發(fā)模板，以及多設(shè)備預(yù)覽等能力，減少開發(fā)者的開發(fā)調(diào)試成本，提升開發(fā)效率。

1. 開發(fā)模板

開發(fā)模板主要包括工程模板和卡片模板。

工程模板：DevEco Studio預(yù)置了豐富的工程模板，可以根據(jù)工程向?qū)лp松創(chuàng)建適應(yīng)于各類設(shè)備的工程，并自動生成對應(yīng)的代碼和資源模板。創(chuàng)建工程時，開發(fā)者可以挑選合適的工程模板。

卡片模板：DevEco Studio提供了多種類型的卡片模板，開發(fā)者可以根據(jù)需要展示的信息類型靈活選擇模板，快速構(gòu)建服務(wù)卡片。

2. 多設(shè)備預(yù)覽

DevEco Studio還支持多設(shè)備預(yù)覽能力，開發(fā)者可以在同一窗口中，同時查看多種設(shè)備下UI界面的展示效果。預(yù)覽器與真機設(shè)備采用相同渲染引擎和UI框架，可以最大程度地做到預(yù)覽效果與真機運行效果的一致。以下視頻展示了多設(shè)備預(yù)覽能力：

四、結(jié)束語

實現(xiàn)完美的一次開發(fā)多端部署效果，離不開開發(fā)者的參與。UI開發(fā)框架和系統(tǒng)在實現(xiàn)一次開發(fā)多端部署的過程中進行了初步的探索，也期待開發(fā)者能反饋更多的多設(shè)備UI開發(fā)過程中的痛點，以及期待系統(tǒng)框架提供的能力。歡迎開發(fā)者和我們一起，在開源社區(qū)將一次開發(fā)多端部署的能力豐富起來！

責(zé)任編輯：haq