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@Componentstruct 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杭州站的直播回放内容哦~