|
ArkUI 是一套構建分布式應用的聲明式 UI 開發框架。它具備簡潔自然的 UI 信息語法、豐富的 UI 組件、多維的狀態管理，以及實時界面預覽等相關能力，幫助您提升應用開發效率，并能在多種設備上實現生動而流暢的用戶體驗。隨著 HarmonyOS 3.1 版本的發布，ArkUI 也新增許多能力，助力應用開發更便攜。 ArkUI框架新增能力概覽 ArkUI能力一直在不斷構建中，如下圖所示，藍色模塊是本次新版本ArkUI框架的新增/增強能力。
ArkUI框架能力集 接下來，小編將從聲明式繪制能力、混合開發能力、多樣化布局能力、一多組件能力、UI動態化能力五大能力，詳細說明ArkUI如何讓應用開發更加便捷。
下面針對這些新增能力，結合示例逐一詳細介紹： 說明：什么是一多？ 一多是一次開發，多端部署的簡稱。具體指一套代碼工程，一次開發，應用安裝包一次上架，多種設備形態按需分發部署。 聲明式Canvas繪制能力 ArkUI 通過 Canvas 組件對外提供高性能 2D 繪制能力，滿足多種場景自定義繪制訴求，Canvas 組件具備下述特性。 （1）Canvas 提供繪制路徑、矩形、圓形、字符以及圖像等多種方法； （2）利用現有 Web Canvas 生態，參考 W3C 的 Canvas 接口，而無需引入 Web 引擎，給開發者提供了一個輕量化的 2D 繪制能力； W3C Canvas 繪制接口 （3）結合聲明式語法，兼顧開發者繪制習慣； （4）基于 GPU 渲染加速。 下面的示例，是通過 Canvas 自繪制實現的，它繪制了一個圖片背景，并在上層填充 “HarmonyOS” 的文本，代碼示例如下： @Componentstruct 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) }) } }實現效果如下圖所示： Canvas繪制能力效果 Canvas組件：https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md#drawimage 高性能混合開發能力，滿足自渲染引擎接入訴求 在應用開發過程中，很多場景是無法直接采用 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代碼片斷2 Xcomponent組件：https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md 多樣化布局能力 另外，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 平臺框架能力，各位開發者敬請期待！ |
