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绘制能力成果
Canvas组件：https://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组件：https://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和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平台框架能力，各位开发者敬请期待！