HDD杭州站•ArkUI让开发更灵活 精华

原文：​​https://mp.weixin.qq.com/s/cX48CPs61daKOC2J5znyJw​​，点击链接查看更多技术内容。

7月15日的HUAWEI Developer Day（简称HDD）杭州站活动中，HarmonyOS技术专家分享了ArkUI的多款新特性，详细解析了这些新特性如何助力开发更灵活，并透露了ArkUI的下一步计划。下面，小编带您了解本次活动中HarmonyOS技术专家分享的精彩内容。

一、整体介绍
ArkUI是用于构建HarmonyOS应用程序的UI开发框架，提供开发者进行应用UI开发时所必须的能力，帮助提升HarmonyOS应用界面开发效率。随着HarmonyOS的版本更新迭代，ArkUI的能力也在不断扩展和增强。在最近的版本中，ArkUI新增/增强了以下能力：

声明式Canvas绘制能力：支持开发者自定义绘制能力，包括Canvas绘制能力和离屏绘制能力。

高级UI组件扩展能力：XComponent组件让开发者轻松面对游戏、地图等独立渲染场景；Web组件提供了HTML5页面加载特性。

UI开发效率提升：在交互归一、多态样式自定义、工具链体验等方面进行了增强和提升，让开发更灵活。

   图1 ArkUI框架能力集

二、声明式Canvas绘制能力
在Web浏览器中，Canvas是一个可自定义width、height的矩形画布，开发者可以通过调用API在画布上绘制路径、矩形、圆形、字符以及添加图像等等，实现自定义绘制图形。

ArkUI结合现有的Web Canvas接口和声明式开发范式特点，为开发者提供了声明式Canvas绘制能力，其具有以下优点：

利用现有Web Canvas生态，对标W3C的Canvas接口。

提供17种属性、35种方法，覆盖大部分绘制场景需求。

采用声明式语法，更符合开发者绘制习惯。

框架集成Canvas能力，无需引入Web引擎。

同时，ArkUI还提供离屏绘制能力。当绘制的图形比较复杂时，频繁的删除与重绘会消耗很多性能。这时，开发者可以使用OffscreenCanvasRenderingContext2D对象在Canvas上进行离屏绘制，将需要绘制的内容先绘制在缓存区，然后将其转换成图片，一次性绘制到Canvas上，加快了绘制速度。

下面我们通过一个演示动图，看看如何使用声明式Canvas来进行绘制：

   图2 声明式Canvas绘制能力

以上示例中，Canvas组件的onReady回调表示CanvasRenderingContext2D对象已经初始化完毕，可以进行绘制。绘制过程中，首先演示了如何绘制了一个西瓜图形：

首先设置绘制属性，通过设置strokeStyle指定画笔颜色为绿色，通过设置fillStyle指定封闭区域的填充色为红色，并通过设置lineWidth指定线宽。然后调用arc方法绘制了一个半径为80的半圆，并调用fill将半圆的颜色填充为红色。最后调用stroke方法绘制边框。这就完成了一个西瓜图形的绘制。

接下来，还演示了调用drawImage方法添加图片。

由以上示例可知，声明式Canvas提供了丰富的绘制方法，可以让开发者高效绘制出精美的图形。感兴趣的小伙伴们，快去体验声明式Canvas，绘制自己的精彩作品吧~

三、高级UI组件扩展能力
1. 基于XComponent组件的C++/TS开发能力

在游戏、地图等应用场景，原生组件往往不能满足需求，开发者需要进行独立渲染。为此，ArkUI框架提供了基于XComponent组件的C++/TS开发能力，以支持独立渲染场景。XComponent 组件是ArkUI的高级UI组件，可与其他原生的ArkUI组件一起进行布局和渲染。同时，XComponent拥有单独的Sur.face，通过系统NDK接口为开发者在C++层提供NativeWindow来创建EGL/GLES环境，从而可以使用标准OpenGL ES开发渲染逻辑，并在XComponent的Sur.face上渲染。

   图3 基于XComponent组件的C++/TS开发能力

那么开发者如何使用此开发能力呢？下面我们以图4为例，介绍如何通过三个步骤在ArkUI框架中实现独立渲染。

   图4 三步实现独立渲染

步骤1：引入框架提供的native_interface_xcomponent.h头文件（此头文件中提供了S|urface创建的生命周期回调和用户事件回调接口），在OnS|urfaceCreate生命周期回调中使用EGL创建渲染环境，并使用GLES进行渲染。
步骤2：在具体业务逻辑完成后，通过HarmonyOS提供的编译工具链，编译成对应的应用动态库。本示例中，我们编译得到动态库 libmynativerender.so。
步骤3：通过在eTS文件中声明XComponent，并赋值libraryname属性为动态库名称，将动态库接入ArkUI框架。ArkUI框架在初始化XComponent时，会创建用于绘制的S|urface，同时根据动态库名称，调用对应动态库的OnS|urfaceCreate生命周期回调。这样，开发者之前写的绘制代码就能渲染出相应的图形。

还想深入学习的小伙伴，可以参考以下更为完整的Demo：

​​https://gitee.com/openharmony/app_samples/tree/master/ETSUI/XComponent​​

2. 基于Web组件的HTML5/TS开发能力

针对应用内嵌网页（网页可能是本地页面，也可能是网络页面）、浏览器等场景，ArkUI框架提供了基于Web组件的HTML5/TS开发能力，支持本地和网络的HTML5页面渲染，也支持在HTML5页面与Web组件之间进行数据传递。如图5所示，ArkUI基于Web内核层，结合接口层的声明式Web组件和符合W3C规范的HTML/CSS/JS接口，为开发者提供基于Web组件的HTML5/TS开发能力。    图5 基于Web组件的HTML5/TS开发能力

那么开发者如何使用此开发能力呢？下面以图6为例，介绍如何使用Web组件实现应用内嵌HTML5页面。

   图6 内嵌HTML5页面

核心实现代码如下：

@Entry
@Component
struct WebIndex {
  private controller: WebController = new WebController();





  build() {
    Row() {
      Column() {
        Web({ src: "https://developer.harmonyos.com/cn/develop/arkUI/", controller: this.controller })
      }
      .width('100%')
    }
    .height('100%')
  }
}

Web组件初始化时，先通过src参数指定Web组件的初始加载路径，再通过controller参数初始化WebController对象。基于runJavaScript 和 registerJavaScriptProxy 方法，WebController对象可以提供HTML5页面和Web组件之间进行数据传递的能力，从而构建出能力更强的 Web 应用。

由于篇幅有限，上述API的使用方法此处不再赘述，开发者可以参考社区开发文档：

​​https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md​​

（注：以上两项能力目前仅支持在真机上调试。）

四、UI开发效率提升
为有效提升UI开发效率，ArkUI在交互归一、多态样式自定义、工具链体验等方面进行了增强。下面为大家一一讲解。

1. 统一交互能力提升

随着输入设备类型日渐丰富，给用户带来了更多的交互方式，也给开发者带来了各种不同的原始交互事件。开发者为了应对不同的原始交互事件，需要监听多种设备的不同事件，并进行对应的逻辑处理。为此，ArkUI框架提升了统一交互能力，抽象出统一的交互规则，并将不同设备的原始交互事件映射到对应的交互规则，让应用开发化繁为简。基于不同的输入方式（例如鼠标、触摸板、键盘）和交互行为，ArkUI抽象了8种基础手势（即交互规则），包括：点击、辅助点按、双击、拖拽、轻扫、滚动及平移、缩放、旋转。这样，开发者只需考虑手势实现的功能，无需关注输入方式和交互行为，实现交互事件归一。

为了方便大家理解，下面结合两个示例进行说明。

示例一：使用Toggle组件实现开关状态切换

进行开关状态切换时，输入方式不同，对应的交互行为也不一样，如图7所示。  

图7 开关状态切换

针对开关状态切换场景，ArkUI抽象出了点击手势，让开发者只需关注开关的状态变化即可。以Toggle组件为例，当某种输入设备触发Toggle状态变化时，Toggle组件提供了onChange回调。在业务处理逻辑中，开发者不用关心输入设备的类型，仅需关注onChange回调即可，通过判断回调中的状态值进行相应的业务处理。

   图8 Toggle组件

示例二：使用PinchGesture组件实现图片缩放

在更复杂的场景下，比如图片缩放场景，不同设备上的交互行为也不同，比如：在触屏上通过双指捏合进行缩放，使用鼠标时则通过按下Ctrl键同时滚动鼠标滚轮来进行缩放。针对缩放场景，ArkUI在框架内部进行了输入事件的整合，抽象出了缩放手势（PinchGesture），用户通过双指捏合或者Ctrl+鼠标滚轮操作，均可以触发PinchGesture事件。这样，开发者无需监听手势、键盘按键、鼠标滚轮等输入设备相关的裸事件，仅需监听PinchGesture即可实现多输入设备的缩放能力。

2. 多态样式自定义能力增强

ArkUI以W3C样式设置能力为参考，提供了对开发者友好的多态样式自定义能力。“多态”是指组件的多种状态。通过组件的不同状态、不同的视觉呈现，向用户展示不同的交互阶段。同时，多态样式自定义能力，支持样式的统一设置和复用，提升了UI开发效率。

为了方便大家理解，我们来看一个多态样式自定义的示例，如图9所示。

   图9 多态样式自定义

此示例使用@Styles装饰器定义了normal、pressed、disabled三种状态，并设置了对应的背景色（分别为棕色、红色和灰色）。同时，在Text组件上使用stateStyles方法设置了对应的状态。为了让状态切换的过渡更自然，还增加了时长为1s的动画效果。

从示例的演示效果中，我们可以看到：当点击“Hi ArkUI”的Text组件时，背景色从棕色平滑过渡到红色，实现了状态从normal到pressed的切换。同样地，当点击“Toggle Status”的Text组件时，背景色从棕色平滑过渡到了灰色，实现了状态从normal到disabled的切换。

3. 开发工具优化

基于ArkUI框架，我们对开发工具DevEco Studio的预览功能进行了优化。首先通过ArkUI获取当前显示页面中所有的组件信息，包括组件的父子结构、大小、位置、样式、属性以及状态信息等。然后，以可视化的形式在预览器界面中展示组件树和组件属性。这样，通过结合DevEco Studio和ArkUI的能力，给开发者带来了以下新的预览体验：

● 亚秒级别实时预览

通过检测最小更新代码，进行局部渲染更新，达到亚秒级的实时预览能力。

● UI界面与代码段可双向跳转

对于复杂的页面，寻找布局和代码的对应关系比较费时。通过双向跳转能力，可以从预览界面跳转到对应的代码段；也可以点击对应的代码段，在预览界面高亮对应的控件。

● 实时查看、编辑组件属性

选中需要编辑的组件，右下角Attributes面板中会显示对应组件的属性，可以通过下拉框进行可视化编辑。当开发者对属性进行改变后，会自动生成应用代码，同时更新预览效果。

   图10 新的预览体验

五、ArkUI的下一步
1. 动态布局能力提升

在不同分辨率或折叠屏场景下，开发者往往需要对界面布局进行特殊适配。为此，后续我们将基于ArkUI提供多分辨率场景布局能力和UI组件自适应能力，减少开发者的工作量的同时，也提供更加生动、自然的自适应效果。

(1) 多分辨率场景布局能力

在布局框架方案中，布局框架在不同分辨率场景下有不同的布局方式。这样，开发者可以把主要精力放在具体内容的组织上，无需过度关注分辨率的变化。

以图11为例，多态布局控件在不同分辨率场景下，有不同的布局方式。在较窄的屏幕场景下，为了增加显示内容，不会加载子页签。而在较宽的屏幕场景下，为了显示更丰富的信息，会自动加载子页签，给用户更好的体验。开发者仅需关注子页签的内容，由布局控件自适应加载。

   图11 多分辨率场景布局

(2) UI组件自适应能力

在UI组件自适应方案中，组件对于自身尺寸的变化有一定的自适应能力。

比如图12所示的多列场景适配，在容器组件中，开发者事先配置好item的布局约束。当容器尺寸变宽时，会触发item变宽，当item宽度达到最大宽度时，便会自适应地从一列变化到两列。变化过程，无需开发者介入，提高了开发效率。

   图12 多列场景适配

2. FA卡片能力增强

对于可玩性较高的卡片场景，我们也将FA卡片能力增强也摆上了日程。在下一步的开发中，计划为FA卡片提供基础的动效能力（比如旋转、平移、缩放、透明度等）和更多的组件支持。

图13 FA卡片动效

ArkUI的每一步都离不开广大开发者的参与。以上介绍的ArkUI新特性中，有一部分就是来源于开发者在社区提出的建议。欢迎开发者和我们一起构筑ArkUI开发框架，夯实泛智能终端的数字底座，支撑千行百业的产业生态！

感兴趣的小伙伴，可以登录华为开发者学堂查看HDD杭州站的直播回放内容哦~