关于harmonyos:ArkUI新能力助力应用开发更便捷

59次阅读

共计 3741 个字符,预计需要花费 10 分钟才能阅读完成。

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 平台框架能力,各位开发者敬请期待!

正文完
 0