UI開發(fā)（ArkTS聲明式開發(fā)范式）概述

基于ArkTS的聲明式開發(fā)范式的方舟開發(fā)框架是一套開發(fā)極簡、高性能、支持跨設(shè)備的UI開發(fā)框架，提供了構(gòu)建HarmonyOS應用UI所必需的能力，主要包括：

• ArkTS

  ArkTS是HarmonyOS優(yōu)選的主力應用開發(fā)語言，圍繞應用開發(fā)在TypeScript（簡稱TS）生態(tài)基礎(chǔ)上做了進一步擴展。擴展能力包含聲明式UI描述、自定義組件、動態(tài)擴展UI元素、狀態(tài)管理和渲染控制。狀態(tài)管理作為基于ArkTS的聲明式開發(fā)范式的特色，通過功能不同的裝飾器給開發(fā)者提供了清晰的頁面更新渲染流程和管道。狀態(tài)管理包括UI組件狀態(tài)和應用程序狀態(tài)，兩者協(xié)作可以使開發(fā)者完整地構(gòu)建整個應用的數(shù)據(jù)更新和UI渲染。ArkTS語言的基礎(chǔ)知識請參考學習ArkTS語言。

• 布局

  布局是UI的必要元素，它定義了組件在界面中的位置。ArkUI框架提供了多種布局方式，除了基礎(chǔ)的線性布局、層疊布局、彈性布局、相對布局、柵格布局外，也提供了相對復雜的列表、宮格、輪播。

• 組件

  組件是UI的必要元素，形成了在界面中的樣子，由框架直接提供的稱為系統(tǒng)組件，由開發(fā)者定義的稱為自定義組件。系統(tǒng)內(nèi)置組件包括按鈕、單選框、進度條、文本等。開發(fā)者可以通過鏈式調(diào)用的方式設(shè)置系統(tǒng)內(nèi)置組件的渲染效果。開發(fā)者可以將系統(tǒng)內(nèi)置組件組合為自定義組件，通過這種方式將頁面組件化為一個個獨立的UI單元，實現(xiàn)頁面不同單元的獨立創(chuàng)建、開發(fā)和復用，具有更強的工程性。

• 頁面路由和組件導航

  應用可能包含多個頁面，可通過頁面路由實現(xiàn)頁面間的跳轉(zhuǎn)。一個頁面內(nèi)可能存在組件間的導航如典型的分欄，可通過導航組件實現(xiàn)組件間的導航。

• 圖形

  方舟開發(fā)框架提供了多種類型圖片的顯示能力和多種自定義繪制的能力，以滿足開發(fā)者的自定義繪圖需求，支持繪制形狀、填充顏色、繪制文本、變形與裁剪、嵌入圖片等。

• 動畫

  動畫是UI的重要元素之一。優(yōu)秀的動畫設(shè)計能夠極大地提升用戶體驗，框架提供了豐富的動畫能力，除了組件內(nèi)置動畫效果外，還包括屬性動畫、顯式動畫、自定義轉(zhuǎn)場動畫以及動畫API等，開發(fā)者可以通過封裝的物理模型或者調(diào)用動畫能力API來實現(xiàn)自定義動畫軌跡。

• 交互事件

  交互事件是UI和用戶交互的必要元素。方舟開發(fā)框架提供了多種交互事件，除了觸摸事件、鼠標事件、鍵盤按鍵事件、焦點事件等通用事件外，還包括基于通用事件進行進一步識別的手勢事件。手勢事件有單一手勢如點擊手勢、長按手勢、拖動手勢、捏合手勢、旋轉(zhuǎn)手勢、滑動手勢，以及通過單一手勢事件進行組合的組合手勢事件。

整體架構(gòu)

圖1 整體架構(gòu)圖

• 聲明式UI前端

  提供了UI開發(fā)范式的基礎(chǔ)語言規(guī)范，并提供內(nèi)置的UI組件、布局和動畫，提供了多種狀態(tài)管理機制，為應用開發(fā)者提供一系列接口支持。

• 語言運行時

  選用方舟語言運行時，提供了針對UI范式語法的解析能力、跨語言調(diào)用支持的能力和TS語言高性能運行環(huán)境。

• 聲明式UI后端引擎

  后端引擎提供了兼容不同開發(fā)范式的UI渲染管線，提供多種基礎(chǔ)組件、布局計算、動效、交互事件，提供了狀態(tài)管理和繪制能力。

• 渲染引擎

  提供了高效的繪制能力，將渲染管線收集的渲染指令，繪制到屏幕的能力。

• 平臺適配層

  提供了對系統(tǒng)平臺的抽象接口，具備接入不同系統(tǒng)的能力，如系統(tǒng)渲染管線、生命周期調(diào)度等。