作者：wanglei，華為UI編程框架技術(shù)專(zhuān)家

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

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

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

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

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

1. 模擬小窗

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

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

{  “app”: {    ...    “smartWindowSize”:“360*640”,    “smartWindowDeviceType”: [      “tablet”    ]  },  ...}

（左右滑動(dòng)，查看更多）

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

2. 平行視界

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

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

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

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

二、ArkUI 3.0框架能力

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

1. 媒體查詢(xún)

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

2. 多態(tài)組件

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

下面通過(guò)一個(gè)示例來(lái)看看，相同的一套開(kāi)發(fā)代碼在手機(jī)、智慧屏和車(chē)機(jī)上展示的不同效果。

示例代碼如下：

Column(){Text("手機(jī)/平板").margin({top:150})Button("普通按鈕").margin({top:40}).onClick(()=>{AlertDialog.show({title:'發(fā)現(xiàn)新版本',message:'當(dāng)前使用移動(dòng)數(shù)據(jù)網(wǎng)絡(luò)，將消耗XXXMB流量，是否更新',primaryButton:{value:'立即更新',action:()=>{}},secondaryButton:{value:'以后再說(shuō)',action:()=>{}}})})}

（左右滑動(dòng)，查看更多）

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

3. 原子布局

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

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

折行布局利用了Flex布局的折行能力實(shí)現(xiàn)，配合布局約束設(shè)置，即可實(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ù)量固定、均分顯示的場(chǎng)景，比如工具欄、底部菜單欄等。

示例代碼如下：

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

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

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）占比布局：是一種很常見(jiàn)的布局，就是根據(jù)容器尺寸按照比例進(jìn)行顯示。

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

@Entry@ComponentstructIndex{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%')}}

（左右滑動(dòng)，查看更多）

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

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

Row(){Image($r('app.media.background')).objectFit(ImageFit.Fill).width('100%').height('100%')    }

（左右滑動(dòng)，查看更多）

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

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

Row(){Image($r('app.media.background')).objectFit(ImageFit.Fill).width('100%').height('100%').aspectRatio(1.2)}

（左右滑動(dòng)，查看更多）

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

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

@Entry@ComponentstructIndex{privatedata: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%')}}

（左右滑動(dòng)，查看更多）

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

4. 柵格系統(tǒng)

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

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

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

Stack(){GridContainer({sizeType:SizeType.Auto}){Row(){Button('OK').fontSize(30).gridSpan(2).useSizeType({lg:4})}}}

（左右滑動(dòng)，查看更多）

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

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

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

1. 開(kāi)發(fā)模板

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

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

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

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

DevEco Studio還支持多設(shè)備預(yù)覽能力，開(kāi)發(fā)者可以在同一窗口中，同時(shí)查看多種設(shè)備下UI界面的展示效果。預(yù)覽器與真機(jī)設(shè)備采用相同渲染引擎和UI框架，可以最大程度地做到預(yù)覽效果與真機(jī)運(yùn)行效果的一致。以下視頻展示了多設(shè)備預(yù)覽能力： 感興趣的小伙伴，可以從官網(wǎng)下載和體驗(yàn)DevEco Studio新版本：

https://developer.harmonyos.com/cn/develop/deveco-studio

四、結(jié)束語(yǔ)

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