HDD 杭州站•ArkUI 让开发更灵活
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 拥有单独的 Surface，通过系统 NDK 接口为开发者在 C++层提供 NativeWindow 来创建 EGL/GLES 环境，从而可以使用标准 OpenGL ES 开发渲染逻辑，并在 XComponent 的 Surface 上渲染。
图 3 基于 XComponent 组件的 C++/TS 开发能力
那么开发者如何使用此开发能力呢？下面我们以图 4 为例，介绍如何通过三个步骤在 ArkUI 框架中实现独立渲染。
图 4 三步实现独立渲染
步骤 1：引入框架提供的 native_interface_xcomponent.h 头文件（此头文件中提供了 Surface 创建的生命周期回调和用户事件回调接口），在 OnSurfaceCreate 生命周期回调中使用 EGL 创建渲染环境，并使用 GLES 进行渲染。
步骤 2：在具体业务逻辑完成后，通过 HarmonyOS 提供的编译工具链，编译成对应的应用动态库。本示例中，我们编译得到动态库 libmynativerender.so。
步骤 3：通过在 eTS 文件中声明 XComponent，并赋值 libraryname 属性为动态库名称，将动态库接入 ArkUI 框架。ArkUI 框架在初始化 XComponent 时，会创建用于绘制的 Surface，同时根据动态库名称，调用对应动态库的 OnSurfaceCreate 生命周期回调。这样，开发者之前写的绘制代码就能渲染出相应的图形。
还想深入学习的小伙伴，可以参考以下更为完整的 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 页面
核心实现代码如下：
Web 组件初始化时，先通过 src 参数指定 Web 组件的初始加载路径，再通过 controller 参数初始化 WebController 对象。基于 runJavaScript 和 registerJavaScriptProxy 方法，WebController 对象可以提供 HTML5 页面和 Web 组件之间进行数据传递的能力，从而构建出能力更强的 Web 应用。
由于篇幅有限，上述 API 的使用方法此处不再赘述，开发者可以参考社区开发文档：
（注：以上两项能力目前仅支持在真机上调试。）
四、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 杭州站的直播回放内容哦~
每一位开发者都是华为要汇聚的星星之火 2021.10.15 加入
提供HarmonyOS关键技术解析、版本更新、开发者实践和活动资讯，欢迎各位开发者加入HarmonyOS生态，一起创造无限可能！
评论