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…
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…
（注：以上两项能力目前仅反对在真机上调试。）
四、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 多列场景适配
-
FA 卡片能力加强
对于可玩性较高的卡片场景，咱们也将 FA 卡片能力加强也摆上了日程。在下一步的开发中，打算为 FA 卡片提供根底的动效能力（比方旋转、平移、缩放、透明度等）和更多的组件反对。
。图 12 多列场景适配2. FA 卡片能力加强
对于可玩性较高的卡片场景，咱们也将 FA 卡片能力加强也摆上了日程。在下一步的开发中，打算为 FA 卡片提供根底的动效能力（比方旋转、平移、缩放、透明度等）和更多的组件反对。图 13 FA 卡片动效ArkUI 的每一步都离不开宽广开发者的参加。以上介绍的 ArkUI 新个性中，有一部分就是来源于开发者在社区提出的倡议。欢送开发者和咱们一起构筑 ArkUI 开发框架，夯实泛智能终端的数字底座，撑持千行百业的产业生态！
感兴趣的小伙伴，能够登录华为开发者学堂查看 HDD 杭州站的直播回放内容哦~