本項(xiàng)目Gitee倉(cāng)地址：深入淺出eTs學(xué)習(xí): 帶大家深入淺出學(xué)習(xí)eTs (gitee.com)

一、eTs介紹

概述

基于TS擴(kuò)展的聲明式開(kāi)發(fā)范式的方舟開(kāi)發(fā)框架是一套開(kāi)發(fā)極簡(jiǎn)、高性能、跨設(shè)備應(yīng)用的UI開(kāi)發(fā)框架，支持開(kāi)發(fā)者高效的構(gòu)建跨設(shè)備應(yīng)用UI界面。

基礎(chǔ)能力

使用基于TS擴(kuò)展的聲明式開(kāi)發(fā)范式的方舟開(kāi)發(fā)框架，采用更接近自然語(yǔ)義的編程方式，讓開(kāi)發(fā)者可以直觀地描述UI界面，不必關(guān)心框架如何實(shí)現(xiàn)UI繪制和渲染，實(shí)現(xiàn)極簡(jiǎn)高效開(kāi)發(fā)。開(kāi)發(fā)框架不僅從組件、動(dòng)效和狀態(tài)管理三個(gè)維度來(lái)提供UI能力，還提供了系統(tǒng)能力接口，實(shí)現(xiàn)系統(tǒng)能力的極簡(jiǎn)調(diào)用。

請(qǐng)參考基于TS擴(kuò)展的聲明式開(kāi)發(fā)范式API文檔，全面地了解組件，更好地開(kāi)發(fā)應(yīng)用。

開(kāi)箱即用的組件

框架提供豐富的系統(tǒng)預(yù)置組件，可以通過(guò)鏈?zhǔn)秸{(diào)用的方式設(shè)置系統(tǒng)組件的渲染效果。開(kāi)發(fā)者可以組合系統(tǒng)組件為自定義組件，通過(guò)這種方式將頁(yè)面組件化為一個(gè)個(gè)獨(dú)立的UI單元，實(shí)現(xiàn)頁(yè)面不同單元的獨(dú)立創(chuàng)建、開(kāi)發(fā)和復(fù)用，使頁(yè)面具有更強(qiáng)的工程性。

豐富的動(dòng)效接口

提供svg標(biāo)準(zhǔn)的繪制圖形能力，同時(shí)開(kāi)放了豐富的動(dòng)效接口，開(kāi)發(fā)者可以通過(guò)封裝的物理模型或者調(diào)用動(dòng)畫(huà)能力接口來(lái)實(shí)現(xiàn)自定義動(dòng)畫(huà)軌跡。

狀態(tài)與數(shù)據(jù)管理

狀態(tài)數(shù)據(jù)管理作為基于TS擴(kuò)展的聲明式開(kāi)發(fā)范式的特色，通過(guò)功能不同的裝飾器給開(kāi)發(fā)者提供了清晰的頁(yè)面更新渲染流程和管道。狀態(tài)管理包括UI組件狀態(tài)和應(yīng)用程序狀態(tài)，兩者協(xié)作可以使開(kāi)發(fā)者完整地構(gòu)建整個(gè)應(yīng)用的數(shù)據(jù)更新和UI渲染。

系統(tǒng)能力接口

使用基于TS擴(kuò)展的聲明式開(kāi)發(fā)范式的方舟開(kāi)發(fā)框架，還封裝了豐富的系統(tǒng)能力接口，開(kāi)發(fā)者可以通過(guò)簡(jiǎn)單的接口調(diào)用，實(shí)現(xiàn)從UI設(shè)計(jì)到系統(tǒng)能力調(diào)用的極簡(jiǎn)開(kāi)發(fā)。

聲明式UI前端

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

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

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

聲明式UI后端引擎

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

渲染引擎

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

平臺(tái)適配層

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

二、基本框架

類(lèi)型定義

長(zhǎng)度類(lèi)型

角度類(lèi)型

點(diǎn)類(lèi)型

顏色類(lèi)型

組件屬性方法使用的顏色Color說(shuō)明如下：

三、組件化分析

可參考：OpenAtom OpenHarmony

@Entry

用@Entry裝飾的自定義組件用作頁(yè)面的默認(rèn)入口組件，加載頁(yè)面時(shí)，將首先創(chuàng)建并呈現(xiàn)@Entry裝飾的自定義組件。

@Component

@Component裝飾的struct表示該結(jié)構(gòu)體具有組件化能力，能夠成為一個(gè)獨(dú)立的組件，這種類(lèi)型的組件也稱(chēng)為自定義組件，在build方法里描述UI結(jié)構(gòu)。自定義組件具有以下特點(diǎn)：

• 可組合：允許開(kāi)發(fā)人員組合使用內(nèi)置組件、其他組件、公共屬性和方法；
• 鏈?zhǔn)秸{(diào)用9+：通過(guò)鏈?zhǔn)秸{(diào)用通用屬性改變組件樣式；
• 可重用：自定義組件可以被其他組件重用，并作為不同的實(shí)例在不同的父組件或容器中使用；
• 生命周期：生命周期的回調(diào)方法可以在組件中配置，用于業(yè)務(wù)邏輯處理；
• 數(shù)據(jù)驅(qū)動(dòng)更新：由狀態(tài)變量的數(shù)據(jù)驅(qū)動(dòng)，實(shí)現(xiàn)UI自動(dòng)更新。

@Preview

用@Preview裝飾的自定義組件可以在DevEco Studio的預(yù)覽器上進(jìn)行預(yù)覽，加載頁(yè)面時(shí)，將創(chuàng)建并呈現(xiàn)@Preview裝飾的自定義組件。

@Builder

@Builder裝飾的方法用于定義組件的聲明式UI描述，在一個(gè)自定義組件內(nèi)快速生成多個(gè)布局內(nèi)容。@Builder裝飾方法的功能和語(yǔ)法規(guī)范與build函數(shù)相同。

@Extend

@Extend裝飾器將新的屬性函數(shù)添加到內(nèi)置組件上，如Text、Column、Button等。通過(guò)@Extend裝飾器可以快速定義并復(fù)用組件的自定義樣式。

@CustomDialog

@CustomDialog裝飾器用于裝飾自定義彈窗。

@Styles

@Styles裝飾器將新的屬性函數(shù)添加到基本組件上，如Text、Column、Button等。當(dāng)前@Styles僅支持通用屬性。通過(guò)@Styles裝飾器可以快速定義并復(fù)用組件的自定義樣式。

@Styles可以定義在組件內(nèi)或組件外，在組件外定義時(shí)需在方法前添加function關(guān)鍵字，組件內(nèi)定義時(shí)不需要添加function關(guān)鍵字。

四、組件化分析

開(kāi)發(fā)的框架主要包括以上幾個(gè)部分，其中我們主要修改的部分在于@Builder函數(shù)中

即在上圖的這個(gè)部分，該程序是單實(shí)現(xiàn)了一個(gè)Hello Word的顯示

編輯：黃飛