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

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

• ArkTS

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

• 布局

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

• 組件

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

• 頁(yè)面路由和組件導(dǎo)航

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

• 圖形

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

• 動(dòng)畫

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

• 交互事件

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

整體架構(gòu)

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

• 聲明式UI前端

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

• 語(yǔ)言運(yùn)行時(shí)

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

• 聲明式UI后端引擎

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

• 渲染引擎

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

• 平臺(tái)適配層

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