ArkUI框架又有哪些新增能力？

ArkUI是一套UI开拓框架，他供应了开拓者进走运用UI开拓时所必须的才气嗯。随着OpenHarmony v3.1 Release（后文简称v3.1）版本的公布，ArkUI框架也增添了许多新才气，接下去追随小编一块看看都有哪些新增才气吧嗯。
1ArkUI框架新增才气概览
本次版本更新主要提升了ArkUI框架开拓大型运用的才气嗯。如图1所示，蓝色模块是本次新版本ArkUI框架的新增/增强才气，他包罗Canvas.OffscreenCanvas.XComponent组件.Web组件.键盘与鼠标和eTS编译打包与实时预览才气嗯。
图1 ArkUI框架新增才气概览图
每一次才气的新增，全是为了闪开拓者能够或者者越发高效.便利地开拓，下面一块领会一下这些新才气都将带来哪些便利嗯。
为了便于我们领会，小编将本次新增的才气分红了以下三类新增申明式Canvas绘制才气.新增混淆开拓才气和增强UI开拓才气嗯。
1.1 新增申明式Canvas绘制才气
新增申明式Canvas绘制才气中包罗Canvas组件和OffscreenCanvas组件嗯。
● Canvas组件为了便利开拓者通过绘制办法完成自界说UI结局，v3.1版本新增了Canvas绘制才气嗯。
● OffscreenCanvas组件为了知足开拓者离屏绘制开拓场景，v3.1版本新增了离屏绘制才气嗯。
有了Canvas绘制才气后，v3.1版本便基于Canvas移植了Lottie的动画库供开拓者运用，后文将一五一十推荐嗯。
1.2 新增混淆开拓才气
新增混淆开拓才气中包罗了XComponent组件和Web组件嗯。
● XComponent组件为了便于开拓者在OpenHarmony体制上构建C++/TS运用，以知足相似.舆图等运用开拓场景，v3.1版本供应了XComponent组件及其配套的NDK（native development kit，本生开拓包）嗯。
● Web组件为了知足开拓者在运用内加载和会见HTML5网页的需要，v3.1版本重点构建了Web组件，并供应了富厚的API，可支持HTML5页面与TS页面举行数据交互嗯。
1.3 增强UI开拓才气
增强UI开拓才气中包罗了键盘与鼠标的组件统一交互才气增强和开拓器械链的eTS编译打包与实时预览才气增强嗯。
● 键盘与鼠标新版本中还重点提升了统一交互的操做体验，开拓者无需举行繁杂适配，即可支持用户运用键盘.鼠标举行UI交互嗯。
● eTS编译打包与实时预览为了知足了多种状态样式统一设置的诉求，v3.1版本供应了@Style遮盖器，优化了器械链的编译功效与预览功效，完变成了支持多种文件大型运用编译嗯。
看完这些新增才气，你或者者会很猎奇，你们是怎么样运用的呀？接下去请追随小编的步-伐，一块领会一下这些新增才气的运用办法吧嗯。
2新增申明式Canvas绘制才气
2.0.1 申明式Canvas推荐
一最先的时刻推荐一下申明式Canvas给我们供应的绘制才气嗯。为了更好地使用现有Web Canvas生态，v3.1版本供应了标-准的W3C Canvas绘制接口（如图2所示），富厚的绘制办法可以闪开拓者高效绘制出矩形.文本.图像等嗯。
注因OffscreenCanvas与Canvas绘制接口相似，都遵照w3c标-准，故此处再也不赘述
图2 W3C Canvas绘制接口
2.0.2 运用办法
下面推荐一位示例，给我们展现申明式开拓范式中Canvas组件的基本运用办法嗯。
图3是三张图片叠加的结局，顶层的图片笼罩了底层的图片嗯。通过依次运用drawImage(x,y, width, height)办法设置图片坐标及尺寸，以后绘制的图片努力笼罩一开始的图像，从而到达图片叠加展现的结局嗯。
图3 图片叠加
以下代码所示，一最先的时刻在Column()组件中建立了一块画布，并结合内置组件与属性办法对画布举行申明式描写嗯。
然后通过RenderingContext()获取下令式的绘图对-象，将申明式UI界面与下令式绘制优良地关联起身嗯。
最终通过onReady回调办法直-接运用下令式语法，运用绘制对-象在画布中举行绘制嗯。
2.1 基于申明式Canvas的Lottie动画支持
2.1.1 推荐
Lottie是业界经常使用的动画样式，他支持通过Canvas渲染，OpenHarmony团队为我们改良了lottie库，命名为lottie-ohos-ets，开拓者能够直-接援用该库，绑定Canvas组件后即可展现动画嗯。
2.1.2 运用办法
Lottie动画的运用主要分为以下四个措施
措施一、准备Lottie文件，做为资源增添（能够运用AE器械制做并导出JSON文件）
措施二、引入Lottie-ohos-ets支持库
import lottie from ‘lottie-ohos-ets’
措施三、将lottie动画与Canvas绑定
措施四、展现动画
3新增混淆开拓才气
3.1 基于XComponent的C++/TS混淆开拓才气
3.1.1 推荐
在运用开拓历程中，许多场景是无法直-接采用UI组合完成的，比如.舆图这类运用需要依赖C++. SDK举行自力渲染，又如相机.视频播放器这类运用是需要运用相机举行预览展现的，因而就需要框架能供应一种能够在C++侧举行绘制的组件，因而v3.1版本就推出了XComponent组件，他能够支持C++/TS混淆开拓嗯。
如图4所示，体制分为运用层.框架层和体制处事层，蓝色模块是新增才气嗯。v3.1版本在框架层部-分供应了申明式的XComponent组件，以便开拓者在运用页面中进走运用嗯。
图4 XComponent的C++/TS混淆开拓
3.1.2 运用办法
在运用层中，开拓者能够运用体制NDK供应的标-准库进走运用消息库的开拓，标-准库中为运用绘制供应了标-准的EGL/OpenGLES接口，能够支持三方SDK直-接引入运用，再结合框架层的XComponent供应的接口即可对C++举行渲染嗯。
基于XComponent组件的C++/TS混淆开拓主要分为以下几个措施
措施一、一最先的时刻是开拓C++消息库嗯。基于NDK编译器械，将开拓者编辑的CPP文件编译成.so文件嗯。
开拓者仅需要引入头文件，并笼罩OnSurfaceCreate办法举行绘制即可运用NDK供应的OpenGLES接口，完成绘制结局嗯。代码以下
措施二、然后通过XComponent组件加载消息库嗯。挪用TS接口，通过TS掌控C++思维，传入数据与事情，即可对C++思维举行渲染嗯。
XComponent组件的运用也极为简易，设置参数对应消息库称呼即可完成加载嗯。代码以下
3.2 基于Web组件的HTML5/TS混淆开拓才气
3.2.1 推荐
有一些运用开拓场景是在运用中嵌入网页，网页应该是当地页面，也应该是网络页面，且需要在HTML5页面中与本生组件之中举行数据通报嗯。针对以上开拓场景，v3.1版本供应了基于Web组件的HTML5/TS混淆开拓才气嗯。
3.2.2 运用办法
Web组件的运用办法主要分为以下几个措施
措施一、一最先的时刻提早准备好HTML5页面文件或者者网络位置
措施二、然后用Web组件加载HTML5页面
措施三、最终就能展现出页面内容
下面通过一位按例，来为我们展现Web组件加载页面的运用措施嗯。如图5所示，这是一位罕见的Web组件运用处景，一最先的时刻是准备好网络位置并将Web组件与其余组件在统一页面中一同纵向布置排列，然后用Web组件通过src指定首页链接并加载页面，最终页面就构建完结了嗯。
图5 Web组件的HTML5/TS混淆开拓
Web组件还供应了将HTML5页面与本生TS页面举行交互的才气，他能够支持在本生组件页面中实行HTML5页面中界说的JavaScript办法，也能够或者者支持在HTML5页面中运用本生页面中注射的JavaScript对-象嗯。由于篇幅有限，此处再也不针对上述才气睁开推荐，开拓者能够自行会见社区开拓文档，基于runJavaScript 办法 和 registerJavaScriptProxy 办法的示例，构建出才气更强的Web运用嗯。
社区开拓文档
/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md
4增强UI开拓才气
4.1 键盘与鼠标的组件统一交互才气增强
在v3.1版本中，ArkUI框架增强了统一交互才气，他让运用开拓越发化繁为简嗯。如图6所示，v3.1版本将鼠标.键盘在组件层面举行了统一，通过雷同事情回调屏障了输入装备种别的差异，因而开拓者无需体贴详细的输入装备种别嗯。
图6 组件统一交互
4.2 开拓器械链的eTS编译打包与实时预览
开拓器械链DevEco Studio也追随v3.1版本的更新做了才气的增强，才气增强后的器械完变成了支持多种文件大型运用编译.拥有亚秒级的实时预览结局.组件双向预览才气.能够实时检察组件的属性，且实时检察的结局已与业界持平嗯。迎接开拓者更新最新的DevEco Studio进走运用体验嗯。
DevEco Studio下载位置
/cn/develop/deveco-studiodownload_beta_openharmony
最终推荐一下v3.1版本为我们供应的新遮盖器@Style嗯。该遮盖器能够将样式统一设置，样式复用，同时v3.1版本针对多态结局，供应了一次性设置接口，该才气能够或者者最大化复用样式设置嗯。如图7所示，左侧通过@Style分-别界说三种样式会合，以后通过右侧stateStyles属性办法，同时设置给UI组件，即可完成图8中三种结局，分-别为平时状态结局.按压状态结局和禁用状态结局嗯。
图7 样式会合
图8 结局图
5结语
以上即是本期ArkUI框架新才气的所有推荐啦，迎接我们努力尝鲜嗯。同时ArkUI框架以后会进一步提升消息布置才气和推出跨OS部署等相庸才气，列位开拓者敬请希望！