ArkUI 新能力，助力應用開發更便捷
ArkUI 是一套構建分散式應用的宣告式 UI 開發框架。它具備簡潔自然的 UI 資訊語法、豐富的 UI 元件、多維的狀態管理，以及實時介面預覽等相關能力，幫助您提升應用開發效率，並能在多種裝置上實現生動而流暢的使用者體驗。隨著 HarmonyOS 3。1 版本的釋出，ArkUI 也新增許多能力，助力應用開發更便攜。
ArkUI框架新增能力概覽
ArkUI能力一直在不斷構建中，如下圖所示，藍色模組是本次新版本ArkUI框架的新增/增強能力。
ArkUI框架能力集
接下來，小編將從宣告式繪製能力、混合開發能力、多樣化佈局能力、一多元件能力、UI動態化能力五大能力，詳細說明ArkUI如何讓應用開發更加便捷。
宣告式Canvas繪製能力：為了方便開發者透過繪製方式實現自定義UI效果，提供Canvas元件。
高效能混合開發能力：為滿足三方渲染引擎接入，比如遊戲、地圖等，提供了XComponent元件，支援C++/ArkTS混合開發。
多樣化佈局能力：為滿足多種多樣的佈局訴求，提供了相對佈局容器、靈活錨點能力、自定義佈局能力。
一多元件能力：針對不同裝置、不同解析度的多平臺場景，增強了一多場景的分欄元件能力；為滿足列表項的懸停訴求，增強了列表的吸頂/吸底能力。
UI動態化能力：為滿足大型應用的區域性更新需求，提供動態化模板能力。
下面針對這些新增能力，結合示例逐一詳細介紹：
說明：什麼是一多？
一多是一次開發，多端部署的簡稱。具體指一套程式碼工程，一次開發，應用安裝包一次上架，多種裝置形態按需分發部署。
宣告式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 #include #include #include
void NativeRender （OH_NativeXComponent* component， void* nativewindow） { // 可呼叫NDK提供的C/C++介面（如：EGL/GLES能力）}
程式碼片斷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 平臺框架能力，各位開發者敬請期待！
