ArkUI是一套构建分布式运用的声明式UI开发结构。它具有简练天然的UI信息语法、丰厚的UI组件、多维的状况管理，以及实时界面预览等相关才能，帮助您提高运用开发效率，并能在多种设备上完成生动而流通的用户体会。随着HarmonyOS 3.1版本的发布，ArkUI也新增许多才能，助力运用开发更快捷。
ArkUI结构新增才能概览
ArkUI才能一直在不断构建中，如下图所示，蓝色模块是本次新版本ArkUI结构的新增/增强才能。
ArkUI结构才能集
接下来，小编将从声明式制作才能、混合开发才能、多样化布局才能、一多组件才能、UI动态化才能五大才能，详细阐明ArkUI如何让运用开发愈加快捷。
1、声明式Canvas制作才能：
为了方便开发者经过制作方法完成自定义UI作用，供给Canvas组件。
2、高性能混合开发才能：
为满意三方烘托引擎接入，比如游戏、地图等，供给了XComponent组件，支撑C++/ArkTS混合开发。
3、多样化布局才能：
为满意多种多样的布局诉求，供给了相对布局容器、灵敏锚点才能、自定义布局才能。
4、一多组件才能：
针对不同设备、不同分辨率的多渠道场景，增强了一多场景的分栏组件才能；为满意列表项的悬停诉求，增强了列表的吸顶/吸底才能。
5、UI动态化才能：
为满意大型运用的部分更新需求，供给动态化模板才能。
下面针对这些新增才能，结合示例逐个详细介绍：
阐明：什么是一多？
一多是一次开发，多端布置的简称。详细指一套代码工程，一次开发，运用安装包一次上架，多种设备形态按需分发布置。
一、声明式Canvas制作才能
ArkUI经过Canvas组件对外供给高性能2D制作才能，满意多种场景自定义制作诉求，Canvas组件具有下述特性。
1）Canvas供给制作路径、矩形、圆形、字符以及图画等多种办法；
2）利用现有Web Canvas生态，参考W3C的Canvas接口，而无需引进Web引擎，给开发者供给了一个轻量化的2D制作才能；
W3C Canvas制作接口
3）结合声明式语法，兼顾开发者制作习气；
4）依据GPU烘托加速。
下面的示例，是经过Canvas自制作完成的，它制作了一个图片背景，并在上层填充“Harmony OS”的文本，代码示例如下：
@Component
struct IndexCanvas {
//获取绘图对象
private ctx: RenderingContext = new RenderingContext();
//列出所要用到的图片
private img: ImageBitmap = new ImageBitmap("common/bg.jpg");
build() {
Column() {
//创立canvas
Canvas(this.ctx)
.width(1500)
.height(900)
.backgroundColor('#ffff00')
//开端制作
.onReady(() => {
this.ctx.drawImage(this.img, 0, 0, 400, 200)
this.ctx.fillStyle = "#FFF"
this.ctx.font = '100px sans-serif bold'
this.ctx.fillText("HarmonyOS", 100, 80)
this.ctx.fillStyle = "rgb(38,79,247)"
this.ctx.fillRect(250, 85, 26, 4)22
})
}
}
}
完成作用如下图所示：
Canvas组件：
gitee.com/openharmony…
二、高性能混合开发才能
在运用开发过程中，很多场景是无法直接采用UI组合完成的，例如游戏、地图是OS上常常运用的一类高频运用，但由于游戏和地图对OS底层制作才能要求较高，这类运用基本上都是直接运用EGL/OpenGLES的Native才能完成，而XComponent就是ArkTS与C++混合开发的粘合剂。
如下面结构图所示，XComponent作为一个ArkTS组件，具有通用声明式组件的特点，可进行布局、事情等的声明式事务开发。一起开发者能够运用OS对外供给的Native API完成Native的事务开发，XComponent担任将Native开发的逻辑和ArkTS的开发逻辑结合，完成统一烘托送显。
XComponent联系图
如下代码片段，代码片段1是声明式的ArkTS完成，代码片段2是Native的完成。XComponent经过加载.so并执行相关事务逻辑，完成声明式与C++的混合开发。
// ArkTS 入口
XComponent({ id: 'xcomponentId' , type: 'surface', libraryname: 'nativerender'})
代码片段1
// C++ 烘托模块
#include
#include
#include
#include
void NativeRender (OH_NativeXComponent* component, void* nativewindow) {
// 可调用NDK供给的C/C++接口（如：EGL/GLES才能）
}
代码片段2
Xcomponent组件：
gitee.com/openharmony…
三、多样化布局才能
别的，ArkUI供给了多种多样的布局才能，包括相对布局容器、灵敏锚点才能、以及自定义布局才能。
1、相对布局容器，让复杂布局扁平化
下面结合示例，详细介绍相对布局是如何使复杂的布局扁平化，更易于开发者开发的。
如下图中“布局作用”所示，假如要完成图中的作用，一段Text文本位于左上角，另一段Text文本放置在右下角，运用线性布局需求这么完成：在外层套一个Column容器，里边嵌套2个Row容器，第一段Text文本放置在第一个Row的左侧，第二段Text文本放置在第二个Row的右侧，需求运用3个布局容器，2层嵌套。
假如运用相对布局，只需求外层套一个RelativeContianer容器，设置第一行文本在相对容器的左上角，设置第二行文本在相对容器的右下角，只需求1个布局容器，1层嵌套，代码完成上也较简练。
2、灵敏锚点，让肯定定位才能更强大
除了以上介绍的布局才能外，ArkUI还供给了肯定定位和相对定位才能，让开发者完成更灵敏的定位，现已供给了2个办法，position和markAnchor。
| 名称 | 参数类型 | 参数类型 |
|---|---|---|
| position | Position | 运用肯定定位，设置元素锚点相对于父容器顶部起点偏移方位。在布局容器中，设置该特点不影响父容器布局，仅在制作时进行方位调整。 |
| markAnchor | Position | 设置元素在方位定位时的锚点，以元素顶部起点作为基准点进行偏移。 |
经过position和markAnchor配合运用能够完成丰厚的肯定定位才能，经过灵敏锚点能够完成如下的定位作用。
3、自定义布局，尺寸、方位任意掌控
ArkUI结构除供给的特定布局才能外，还供给了答应开发者自定义的布局才能。如图中所示的圆形布局，经过现有的线性布局是很难完成的，像这类布局就能够经过自定义布局才能完成。其原理呢，就是经过对开发者露出丈量和布局的接口，答应开发者自己丈量子组件和设置子组件方位。
圆形布局作用
流程如下图所示，开发者经过onMeasure / onLayout拿到子组件数据后，经过measure丈量每个组件巨细，并依据开发者目的经过layout设置每个组件的方位，最终完成开发者想要的布局。
自定义布局完成流程
除图中的圆形布局外，瀑布流布局也能够经过自定义布局完成。
四、一多组件才能
为帮助开发者更高效开发运用，咱们还供给了分栏架构组件及列表组件等一多组件才能。
1、简单快速的分栏架构组件
分栏架构组件能够在不同设备或不同分辨率渠道下显现不同作用，分栏组件能自动依据断点调整为二分栏或三分栏。
分栏控件的侧边栏也有2种显现方法，能够是嵌入式的，内容区显现在侧边栏右侧，也能够是悬浮在内容区之上，满意开发者不同诉求。
2、列表组件才能增强，内置横滑动效、吸顶作用
1）横滑动效
咱们平常运用比较多的聊天软件，它的聊天记录或通信录一般都是运用列表组件完成的，当需求对消息或通信录进行删除时，就是对列表的列表项删除。ArkUI新增了列表的手势删除列表项功能，用户能够经过左滑或右滑删除某一列表项，并内置动画作用。
2）吸顶作用
除此之外，列表组件还供给了吸顶作用，在滑动列表时，列表组件的title能够悬浮在顶端，便于用户快速辨认所属类别。
五、UI动态化才能
在不从运用商场下载整体运用的前提下完成运用的部分内容更新，是业界（尤其是互联网运用）的一种典型场景。这类场景的完成就依赖UI动态化才能，动态化本质是一种跨渠道结构，只不过额外添加了不升级运用而完成动态更新的才能。
UI动态化原理图
基本原理如上图所示：布置在云端的三四方DSL，经过网络下载，三方解析结构担任加载DSL，并经过解析引擎解析为ArkUI声明式组件，经过@Extend、@ObjectLink、@Builder机制支撑动态化添加组件才能并融合到现有的UI中，ArkUI供给加载运转转换后的组件树，并担任经过结构烘托管线送显。
结语
以上就是本期ArkUI结构新才能助力运用开发更快捷的全部介绍啦，欢迎大家到HarmonyOS开发者官网下载SDK包体会。
未来ArkUI结构会持续环绕竞争力和生态演进，多维度细粒度并发，进一步提高能效比，推出统一的声明式2D&3D范式，不断丰厚跨OS渠道结构才能，各位开发者敬请期待！
