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

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

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

一、HarmonyOS系統能力

1. 模擬小窗

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

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

（左右滑動，查看更多）

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

2. 平行視界

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

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

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

二、ArkUI 3.0框架能力

1. 媒體查詢

2. 多態組件

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

示例代碼如下：

Column(){Text("手機/平板").margin({top:150})Button("普通按鈕").margin({top:40}).onClick(()=>{AlertDialog.show({title:'發現新版本',message:'當前使用移動數據網絡，將消耗XXXMB流量，是否更新',primaryButton:{value:'立即更新',action:()=>{}},secondaryButton:{value:'以后再說',action:()=>{}}})})}

（左右滑動，查看更多）

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

3. 原子布局

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

折行布局利用了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@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組件中將內容均分顯示。

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

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

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

（左右滑動，查看更多）

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

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

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

（左右滑動，查看更多）

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

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

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

（左右滑動，查看更多）

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

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

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

（左右滑動，查看更多）

此示例通過List作為布局容器，進行內容線性排布，并支持滑動響應。

4. 柵格系統

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

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

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

（左右滑動，查看更多）

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

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

1. 開發模板

開發模板主要包括工程模板和卡片模板。

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

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

2. 多設備預覽

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

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