更多信息请访问：https://harmonyos.51cto.comHarmonyOS是与华为合作打造的HarmonyOS官方社区，自诞生之日起就为满足分布式多设备应用场景而设计。智能屏、车机、平板，小到手机、手表。多设备场景应用UI界面开发面临新的困难和挑战，如下图所示：图1多设备开发的挑战要想能够正常显示，无疑需要开发者在UI上花费大量精力适应。开发者往往需要实现多套界面布局（甚至多套项目）以满足不同设备间的设计差异。即使页面差异不大，也需要进行多设备测试，在设备或模拟器上进行多次打包编译才能看到效果。在后期维护过程中，还需要不断检查不同设备的兼容性，这大大增加了应用开发者的工作量。为了解决上述问题，简化开发者在多设备上的开发调试成本，我们提出多端部署一次性开发的设计理念，通过一套工程代码，一次性开发和调试。发布可以按需部署到不同的设备。为了实现这一目标，我们从Harmony系统能力、ArkUI3.0框架能力、开发工具能力三个方面为开发者提供了多种适配方式和能力。下面将一一介绍。一、HarmonyOS系统能力首先介绍一下在系统层面提供的能力。系统能力不需要开发人员调整页面或业务逻辑。只需添加几行配置描述，系统就可以适配多种设备。系统能力独立于开发范式，因此在新的UI编程框架下仍然可以使用。下面我们依次介绍两种系统能力：模拟小窗和平行视界。1、模拟小窗模拟小窗是最常见也是最简单的多设备适配方式。利用系统的悬浮窗能力，可以将低分辨率的应用程序以悬浮窗的形式显示在高分辨率的屏幕上。展示。一个常见的使用场景是在平板或PC上运行的移动应用，如下图所示：图2模拟窗口使用起来非常简单，只需要在项目中的config.json文件中添加两条说明，配置即可目标设备类型和应用程序对应的窗口大小，以便低分辨率应用程序可以在高分辨率设备上运行。示例代码如下：{"app":{..."smartWindowSize":"360*640","smartWindowDeviceType":["tablet"]},...}这种用法可以保证我们的应用显示效果与原有平台效果一致，开发??者无需进行额外的界面适配。但是，这种方法也有局限性。最明显的问题是没有办法使用所有的高分辨率屏幕。整个屏幕显示的数据量并没有因为屏幕分辨率的提高而增加，造成屏幕空间的浪费。为了解决这个问题，系统提供了另一种适配方案——平行视界。2.平行视图系统为折叠屏和平板设备提供平行视图能力。采用分屏显示的思路，将屏幕分为左右两部分，分别显示与应用关联的两个页面的内容。这样各个区域既能保持良好的界面显示效果，又能增加屏幕的有效数据量，充分利用屏幕显示区域。常用于新闻和购物场景，同时显示两个相关页面，如下图：图3ParallelHorizo??ns使用ParallelHorizo??ns时，首先需要在config.json文件中配置metaData声明支持对于平行视界。同时，还需要添加easygo.json文件，用于配置页面路由关系，引导系统进行分屏显示。ParallelHorizo??ns的详细使用说明请参考官网：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/multi-device-ui-app-multiplier-guidelines-00000011358484282.ArkUI3.0框架能力以上两个是多终端适配方案，可以通过配置实现。它们易于使用，但使用场景相对有限。为了更精准地适配多设备界面，ArkUI3.0框架提供了媒体查询、多态控件、原子布局、网格系统，方便开发者选择合适的能力进行UI界面构建。1.媒体查询媒体查询是CSS提供的标准能力，是响应式网页设计的关键部分。这种能力作为最基本的UI响应式设计能力，在新的UI范式中依然保留。在新的UI范式中，通过API接口对外提供媒体查询能力，可探索的范围包括页面大小、设备分辨率、屏幕方向、页面纵横比、屏幕大小、设备类型、屏幕类型、主题模式。开发者可以根据不同的查询结果进行自定义处理。例如：当屏幕方向发生变化时，可以调整界面中的布局样式和组件显示效果；还可以根据不同的设备类型控制组件的显示和隐藏；并在查询状态发生变化时提供事件通知。图4媒体查询2.多态组件UI界面的构建离不开组件的使用。ArkUI3.0框架为开发者提供了多态组件，封装了不同设备的样式和交互方式，为开发者完成了大部分的适配工作。在使用多态组件时，开发者无需考虑设备差异，只需关注功能实现即可。下面举个例子，看看同一套开发代码在手机、智慧屏、车机上显示的不同效果。图5多态组件示例代码如下：Column(){Text("Phone/Tablet").margin({top:150})Button("Normalbutton").margin({top:40})。onClick(()=>{AlertDialog.show({title:'发现新版本',message:'当前使用移动数据网络，将消耗XXXMB流量，更新',primaryButton:{value:'立即更新',action:()=>{}},secondaryButton:{value:'Let'stalklater',action:()=>{}}})})}产品设计师往往不满足于使用系统默认样式，希望使用自定义样式针对不同平台风格风格。为了防止开发者逐个组件调整样式，ArkUI3.0框架将组件样式相关的设置信息（如颜色、大小、圆角弧度、内容文字等）抽象出来形成参数表，根据参数名称和参数值。映射。UI组件样式属性值来自于这个参数表。开发设计人员只需调整参数值，即可调整组件的显示效果。3、原子布局多设备最大的区别就是屏幕的分辨率，不同分辨率的适配离不开自适应布局的能力。针对常见的开发场景，我们细化了七种原子布局能力。这些布局可以独立使用，也可以与多个布局叠加使用。下面我们依次介绍这七种原子布局能力：（1）折叠布局：常用于横竖屏适配或者手机转平板的场景。比如垂直方向的空间缩小了，但是水平方向的显示面积增加了，可以考虑使用折叠布局，将垂直方向的排版改为水平方向的排版。图6折叠布局折叠布局利用了Flex布局的折叠能力，配合布局约束设置，可以实现折叠排列的效果。示例代码如下：Color.White).fontSize(30)}.constraintSize({minWidth:'50%',minHeight:'50%',maxWidth:400}).backgroundColor(Color.Gray)Flex({justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center}){Text("SecondContent").fontSize(30).fontColor(Color.White)}.constraintSize({minWidth:'50%',minHeight:'50%',maxWidth:400})。backgroundColor('rgb(207,171,103)')(2)均匀分布布局：常用于内容量固定、均匀显示的场景，如工??具栏、底部菜单栏。图7均匀分布布局示例代码如下：@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('方舟').fontSize(20).borderColor(Color.Red).borderWidth(1)Text('UI').fontSize(20).borderColor(Color.Red).borderWidth(1)}.width('100%').height('100%')}}只需要配置为FlexAlign.SpaceEvenly方式，内容就可以在Flex组件中均匀显示。(3)隐藏布局：是一种比较高级的布局方式，常用于分辨率变化较大，不同分辨率下显示内容不同的场景。主要思想是通过增加或减少显示内容来保持最佳显示效果。例如，媒体播放器控制器可以在宽屏场景下完整显示所有控制项（包括播放、暂停、上一首、下一首、快进、快退以及可能的点赞和收藏按钮等），而在低分辨率下场景只保留了一些控制项（比如播放、暂停、上一个和下一个按钮）。图8隐藏布局隐藏布局使用起来非常简单，只需通过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)比例布局：是一个很常见的布局是按照容器的大小比例显示。图9比例布局通过设置百分比大小，可以实现比例调整。示例代码如下：@Entry@ComponentstructIndex{build(){Row(){Text('Hello').fontSize(20).width('50%').backgroundColor(Color.Red)Text('World').fontSize(20).width('20%').backgroundColor(Color.Yellow)Text('方舟').fontSize(20).width('15%').backgroundColor(Color.Green)Text('UI'.fontSize(20).width('15%').backgroundColor(Color.Gray)}.width('100%').height('100%')}}(5)拉伸缩放布局：组件大小跟随父容器的大小变化产生拉伸或缩放的显示效果。图10拉伸缩放布局通过设置相对容器的比例，可以实现拉伸或缩放的显示效果。示例代码如下：Row(){Image($r('app.media.background')).objectFit(ImageFit.Fill).width('100%').height('100%')}(6)fixedAspectRatioLayout：在拉伸和缩放时保持自己的纵横比。通常用于图片缩放场景，可以保持图片显示效果正常，防止图片被拉伸或压缩，造成显示失真。图11固定纵横比布局通过设置纵横比，显示会按照固定的纵横比进行拉伸，保证图像不变形。示例代码如下：Row(){Image($r('app.media.background')).objectFit(ImageFit.Fill).width('100%').height('100%').aspectRatio(1.2)}(7)扩展布局：根据大小调整内容显示数量，主要通过列表等能力。图12扩展布局根据不同的宽度显示不同数量的内容，通过滑动操作可以显示更多的内容。示例代码如下：@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.Horizo??ntal).width('100%').height(100)}.width('100%').height('100%')}}本例使用List作为布局容器，线性排列内容，支持滑动响应。4.网格系统ArkUI3.0框架也提供了完整的网格系统。所谓网格系统，来源于UX设计中的网格设计，根据不同的网格数量将屏幕宽度划分为不同的列，组件的大小占据一个或多个网格。以这种方式设计的布局系统称为网格系统。使用网格系统可以屏蔽屏幕分辨率的差异，在不同分辨率的屏幕上保持显示内容的相对大小一致。常见的网格系统有8格系统和12格系统，但我们提供了动态网格系统，可以根据不同的屏幕尺寸动态调整网格数量。使用动态网格系统时，不同分辨率的设备使用不同的网格配置。比如手机竖屏采用4格系统，手机横屏和折叠屏采用8格系统，大屏采用12格系统。图13动态网格系统为了方便开发者，ArkUI3.0框架提供了一个网格布局容器GridContainer。我们来看一个例子，代码如下：Stack(){GridContainer({sizeType:SizeType.Auto}){Row(){Button('OK').fontSize(30).gridSpan(2).useSizeType({lg:4})}}}网格布局容器可以设置为固定数量的网格或设置为自动模式。本例使用Auto模式，grid布局容器会根据宽度动态调整grid数量。同时，通过useSizeType属性方法，可以设置组件在不同网格模式下所占用的网格数。例如：“.useSizeType({lg:4})”表示在大网格系统（即12格系统）中，Button组件的宽度占用4个网格显示。因此本例在手机和平??板上的显示效果如下：图14显示效果3.开发工具能力除了以上系统能力和ArkUI3.0框架能力，我们还为开发者提供了开发工具（DevEcoStudio）提供丰富的开发模板和多设备预览能力，降低开发者开发调试成本，提高开发效率。1.开发模板开发模板主要包括项目模板和卡片模板。项目模板：DevEcoStudio预设了丰富的项目模板，可以根据项目向导轻松创建适合各种设备的项目，并自动生成相应的代码和资源模板。在创建项目时，开发者可以选择合适的项目模板。卡片模板：DevEcoStudio提供了多种类型的卡片模板。开发者可以根据展示的信息类型灵活选择模板，快速构建业务卡片。图15项目模板和卡片模板2.多设备预览DevEcoStudio也支持多设备预览能力。开发者可以在同一个窗口同时查看多个设备下UI界面的显示效果。预览器和真机使用相同的渲染引擎和UI框架，可以最大限度的保证预览效果和真机运行效果的一致性。下面的gif展示了多设备预览能力：感兴趣的朋友，可以到官网下载体验新版DevEcoStudio：https://developer.harmonyos.com/en/develop/devecostudio4.结论实现多终端完美一次性开发部署效果离不开开发者的参与。在实现一次开发、多端部署的过程中初步探索了UI开发框架和体系。我们也期待开发者针对多设备UI开发过程中更多的痛点以及系统框架提供的能力进行反馈。欢迎开发者加入我们，丰富开源社区一次开发多机部署的能力！了解更多请访问：与华为官方共建的鸿蒙科技社区https://harmonyos.51cto.com
