HDC2021技术分论坛：ArkUI 3.0让多设备开发更简单

作者：wanglei，华为UI编程框架技术专家

HarmonyOS自诞生以来，就是为满足分布式多设备应用场景而设计的，大到智慧屏、车机、平板，小到手机、手表。在多设备场景下进行应用UI界面开发，面临新的困难与挑战，如下图所示：

​图1 多设备开发的挑战

为了使UI界面在色彩风格、屏幕尺寸、交互方式和组件功能等差异下仍能够正常显示，无疑需要开发人员花费大量精力在UI适配。开发人员常常需要实现多套界面布局（甚至多套工程），来满足不同设备间的设计差异。即使页面差异不大，也需要进行多设备测试，多次打包编译在设备或者模拟器上运行查看效果。后期维护过程中也需要不断查看不同设备下的兼容性，这些都极大地增加了应用开发者的工作量。

为了解决上述问题，简化开发者在多设备上的开发调试成本，我们提出了一次开发多端部署的设计理念，实现通过一套工程代码，一次开发上架，即可按需部署到不同设备。为了实现这一目标，我们从Harmony系统能力、ArkUI 3.0框架能力和开发工具能力三个方面，为开发者提供了多种适配方法和能力。

下面将一一为大家介绍。

目录

一、HarmonyOS系统能力

二、ArkUI 3.0框架能力

三、开发工具能力

四、结束语

---

一、HarmonyOS系统能力

首先介绍一下系统层面提供的能力。系统能力无需开发者进行页面调整，也无需进行业务逻辑调整，仅通过增加简单的几行配置描述，即可由系统进行多设备适配。系统能力与开发范式无关，因此在新的UI编程框架下仍可使用。下面我们依次介绍两种系统能力：模拟小窗和平行视界。

1. 模拟小窗

模拟小窗是最常用也是最简单的一种多设备适配方式，通过利用系统的悬浮窗能力，将低分辨率的应用，以悬浮窗口的形式在高分辨率屏幕上进行显示。常见的使用场景是手机应用在平板或PC上运行的场景，如下图所示：

图2 模拟小窗

模拟小窗的使用方式非常简单，只需在项目中config.json文件中增加两条描述，分别配置好应用的目标设备类型和响应的窗口尺寸，即可将低分辨率的应用运行在高分辨率设备上。示例代码如下：

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

这种使用方式能够良好地保证我们应用的展示效果和原始平台效果是一致的，无需开发者进行额外的界面的适配。但是这种方式也有局限，最显著的问题就是没有办法利用全部高分辨率的屏幕，整个屏幕内展示的数据量没有因屏幕分辨率的增加而增大，造成了屏幕上空间的浪费。为解决此问题，系统提供了另一种适配方案——平行视界。

2. 平行视界

系统针对折叠屏、平板设备提供了平行视界的能力，借助分屏显示的思想，将屏幕分为左右两个部分，分别显示应用相关联的两个页面内容。这样每个区域都能够保持良好的界面显示效果，也增加了屏幕内的有效数据量，良好地利用了屏幕显示区域。常用于新闻、购物类的场景，将相关的两个页面同时显示，如下图所示：

图3 平行视界

使用平行视界时，首先需要在config.json文件中配置metaData，声明支持平行视界。同时，还需要增加easygo.json文件进行页面路由关系配置，指导系统进行分屏显示。

平行视界的详细使用说明，可参考官网：

文档中心

二、ArkUI 3.0框架能力

上述两种是通过配置即可实现的多端适配方案，使用简单，但是使用场景比较受限。为了更加精准地适配多设备界面，ArkUI 3.0框架提供了媒体查询、多态控件、原子布局和栅格系统，方便开发者选择合适的能力进行UI界面构建。

1. 媒体查询

媒体查询是CSS提供的标准能力，是响应式Web设计的关键部分。在新的UI范式中仍