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

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

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

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

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

1. 模擬小窗

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

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

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

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

2. 平行視界

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

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

平行視界的詳細使用說明，可參考官網：

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

二、ArkUI 3.0框架能力

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

1. 媒體查詢

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

2. 多態(tài)組件

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

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

示例代碼如下：

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

（左右滑動，查看更多）

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

3. 原子布局

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

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

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

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）均分布局：常用于內容數量固定、均分顯示的場景，比如工具欄、底部菜單欄等。

示例代碼如下：

@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組件中將內容均分顯示。

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

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

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

通過設置百分比尺寸，即可實現比例調整。示例代碼如下：

@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）拉伸縮放布局：組件尺寸跟隨父容器尺寸變化，產生拉伸或縮放的展示效果。

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

Row（） { Image（$r（‘app.media.background’）） .objectFit（ImageFit.Fill） .width（‘100%’） .height（‘100%’） }

（左右滑動，查看更多）

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

圖11 固定寬高比布局

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

Row（） { Image（$r（‘app.media.background’）） .objectFit（ImageFit.Fill） .width（‘100%’） .height（‘100%’） .aspectRatio（1.2）}

）

（7）延伸布局：根據尺寸調整內容顯示數量，主要是通過像列表這樣的能力來實現。

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

@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作為布局容器，進行內容線性排布，并支持滑動響應。

4. 柵格系統(tǒng)

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

常見的柵格系統(tǒng)有8柵格系統(tǒng)和12柵格系統(tǒng)，而我們提供的是動態(tài)柵格系統(tǒng)，可以根據不同的屏幕尺寸，動態(tài)地調整柵格數量。使用動態(tài)柵格系統(tǒng)時，不同分辨率的設備使用不同的柵格配置，比如：手機豎屏采用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}） } }}

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

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

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

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

1. 開發(fā)模板

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

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

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

2. 多設備預覽

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

四、結束語

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

責任編輯：haq