一、UI 開發框架

在 HarmonyOS 開發中，官方主要推出了兩種開發框架，一個是基于 Java 的，一個是基于 ArkTS 的。

• 基于 Java：應用中所有用戶界面元素都由基礎組件 Component 和組件容器 ComponentContainer 對象構成。
• 基于 ArkTS：包括組件和頁面，組件時頁面搭建的最小單位，通過組建的組合構建界面，頁面 Page 是框架的最小調度分割單位，可以有多個功能頁面，再通過 路由API 進行頁面跳轉和統一管理。

而后，基于 ArkTS 的 UI 開發，出現了兩種開發范式，一種是基于 JS 的類 Web 開發范式和基于 eTS 的聲明式開發范式，后變為基于 ArkTS 的聲明式開發范式。

• 基于 JS 的類 Web 開發范式：傳統三件套
• 基于 ArkTS 的聲明式開發范式：采用 TS 語言，進行聲明式 UI 語法擴展，從組件，狀態管理和動效三個維度提供繪制能力。

二、聲明式開發范式

在鴻蒙操作系統（HarmonyOS）中，聲明式開發范式是一種以 “描述 UI 應該是什么樣子” 為核心的開發模式，與傳統的 “命令式開發范式”（通過代碼一步步操作 UI 狀態變化）形成對比。它更貼近自然語言的邏輯，讓開發者聚焦于 UI 的結構和交互規則，而非具體的實現步驟。

基于ArkTS的聲明式開發范式的方舟開發框架是一套開發極簡、高性能、支持跨設備的UI開發框架，提供了構建應用UI所必需的能力。

• ArkTS 語言：TS 的超集，包含 TS 所有特性，擴展了聲明式UI、狀態管理等。
• **布局：**定義了組件在界面中的位置。有線性布局、層疊布局等
• 組件：組件是UI的必要元素，形成了在界面中的樣子，由框架直接提供的稱為系統組件，由開發者定義的稱為自定義組件。
• **頁面路由和組件導航：**應用可能包含多個頁面，可通過頁面路由實現頁面間的跳轉。一個頁面內可能存在組件間的導航如典型的分欄，可通過導航組件實現組件間的導航。
• **動畫：**動畫是UI的重要元素之一。組件內置動畫效果外，還包括屬性動畫、顯式動畫、自定義轉場動畫以及動畫API等。
• **交互事件：**交互事件是UI和用戶交互的必要元素。觸摸事件、鼠標事件等。
• **自定義能力：**自定義能力是UI開發框架提供給開發者對UI界面進行開發和定制化的能力。

1、聲明式開發范式的核心特點

1. 關注 “結果” 而非 “過程” 開發者只需通過代碼描述 UI 的最終形態（如布局、樣式、數據綁定關系），系統會自動處理從數據到 UI 的映射邏輯，以及 UI 的更新過程。 例如：若要展示一個列表，只需聲明 “列表項由數組items渲染，每個項顯示item.name”，無需手動編寫 “循環創建控件、添加到容器” 的命令式代碼。
2. 數據驅動 UI 當數據發生變化時，系統會自動對比前后數據差異，只更新受影響的 UI 部分（即 “差分更新”），無需 JS Framework手動操作 DOM 或控件狀態。 這種機制大幅減少了 “數據 - UI 同步” 的代碼量，降低了出錯概率。
3. 聲明式語法 鴻蒙的聲明式開發主要通過ArkTS 語言實現，其語法簡潔直觀，支持類似 HTML 的標簽式寫法和數據綁定表達式。例如：

// 聲明一個包含文本和按鈕的組件
@Component
struct HelloComponent {@State count: number = 0; // 聲明狀態變量build() {Column() { // 聲明垂直布局容器Text(`點擊次數: ${this.count}`) // 文本與狀態綁定.fontSize(20)Button('點擊我') // 聲明按鈕.onClick(() => { this.count++ }) // 綁定點擊事件，修改狀態}}
}

2、與命令式開發的對比

維度	命令式開發	聲明式開發（鴻蒙）
核心邏輯	手動編寫 “創建 - 修改 - 刪除” UI 的步驟	描述 UI 的結構、數據關系和交互規則
數據與 UI 同步	需要手動監聽數據變化并更新 UI（易出錯）	系統自動同步，數據變則 UI 變
代碼復雜度	隨 UI 復雜度上升而急劇增加	復雜度更平緩，聚焦業務邏輯
可讀性	需跟蹤代碼執行流程才能理解 UI 最終形態	直觀易懂，代碼即 UI 結構描述

3、整體架構

1. 應用層（最上層）

用戶直接交互的應用程序。開發者基于鴻蒙的聲明式 UI 框架編寫應用，例如天氣 App、計算器 App 等。

2. 聲明式 UI 前端

提供UI開發范式的基礎語言規范，，并提供了內置的UI組件，布局和動畫，多種狀態管理機制，一系列接口。

3. 語言運行時

提供針對UI范式語法的解析能力，跨語言調用支持能力和TS高性能運行環境。

4. 聲明式 UI 后端引擎

提供了兼容不同開發范式的UI渲染管線，多種基礎組件，布局計算，動效，交互事件

5. 渲染引擎

高效的繪制能力

6. 平臺適配層

提供了對系統平臺的抽象接口，具備介入不同系統的能力。

7. OS（最底層）

• 作用：操作系統內核，提供基礎服務。
• 說明：例如進程管理、內存管理、驅動程序等。

三、基于 ArkUI 的項目

1、鴻蒙聲明式開發范式（ArkUI）

聲明式開發的核心是：通過描述 UI 的結構和狀態，讓框架自動處理渲染邏輯，開發者無需手動操作 DOM 或組件更新。

@Entry
@Component
struct CounterPage {// 聲明狀態變量（數據驅動UI）@State count: number = 0;build() {// 聲明UI結構（描述“是什么”）Column() {Text(`當前計數：${this.count}`)  // 文本組件，綁定count狀態.fontSize(20).margin(10)Button('點擊加1')  // 按鈕組件.onClick(() => {this.count++;  // 只修改狀態，UI自動更新}).backgroundColor('#007DFF').fontColor('#FFFFFF')}.width('100%').height('100%').justifyContent(FlexAlign.Center)}
}

聲明式特點：

1. 狀態驅動：@State 裝飾的 count 變化時，框架自動更新依賴它的 Text 組件。
2. 結構直觀：通過嵌套組件（Column 包含 Text 和 Button）描述 UI 層次，類似 HTML 的結構但更簡潔。
3. 無需手動操作：不需要像命令式那樣調用 setText()、setOnClickListener() 等方法。

2、文件結構

在應用的目錄結構中， ets 目錄下的文件一般以 .ets 結尾的是 ArkTS 文件， ets 是 extended TypeScript 的縮寫， ets 文件一般用于描述 UI 布局、樣式、事件交互和頁面邏輯等。以. ts 為擴展名的文件為 TypeScript 文件。

在 ets 目錄下，可以包含多個子目錄，一般一個子目錄用于實現一個 Ability 。在基于 Stage 模型的開發中， Ability 和 Pages 存放在該目錄下，每個 Ability 對應一個文件夾，其下對應一個 Ability 的 ts 實現文件。

資源目錄 resources 文件夾位于 src / main 下，應用的資源文件（字符串、圖片、音頻等）統一存放于 resources 目錄下，便于開發者使用和維護。 resources 目錄包括三大類目錄，一類為 base 目錄，一類為限定詞目錄，另一類為 rawfile 目錄。

四、聲明式語法

1、UI 描述規范

基于 ArkTS 的聲明式開發方式創建的應用，在 Stage 模型下，由 UIAbility 負責 UI 界面，每個 UIAbility 有一 windowstage 負責窗口管理，窗口負責顯示頁面（ Page )，每個頁面的內部可以包含多個組件，其中必須有且只有一個入口（ Entry ）組件，組件內部可以嵌套其他組件。

因此，無論是 FA 模型還是 Stage 模型，一個頁面（ Page ）對應一個 ETS 文件，一個頁面內可以有若干個組件，基于 ArkTS 語言定義組件采用 struct 關鍵字，并通過生成器函數( build ()）構建組件內的內容，組件內可以包含其他組件，其他組件可以是系統的內置組件，也可以是自定義的組件。一個頁面必須有且只有一個入口組件，入口組件由＠ Entry 裝飾器修飾。構建一個頁面的基本代碼如下：

@ Entry 
/／入口裝飾器
@ Component 
/／組件裝飾器struct MyIndexComponent {
@ State mydata : string =''
/／狀態數據build (){
/／生成器函數
/／省略了構造內部組件}
}
@ Componentstruct OtherComponent {
@ State msg : string =build (){
/／構造內部組件}
}

在生成器方法內構建的界面組件組成一棵樹形結構，組件包括容器和普通組件，容器可以認為是特殊的組件，其內部可以放置別的組件或容器，容器組件也稱為布局，普通組件一般不能包含其他組件。

2、組件化

由裝飾器@Component裝飾的struct結構體具備了組件化能力,是一個獨立的組件，這種組件也稱為自定義組件,自定義組件在其生成器build方法里進行UI結構描述,使其具有豐富的界面展示。

(1)可組合:自定義可以由其他組件組合而成,允許開發者在自定義組件內使用內置組件、其他組件、公共屬性和方法等。

(2)可重用:自定義組件可以被其他組件使用,作為別的組件的一部分,并且可以重用，可以作為不同的實例在不同的父組件或容器中使用。

(3)數據驅動更新:自定義組件由狀態變量的數據驅動,可以實現UI自動刷新。

(4)生命周期:自定義組件具有生命周期,具有相應的回調方法,開發者可以重寫回調方法以實現組件自身的業務功能和邏輯。

(5)生成器方法:自定義組件必須定義生成器build方法,該方法用于構建組件內容。(6)無構造函數:自定義組件不能定義構造函數,組件內容的初始化構造是通過build完成的。

@component
struct OC {build(){Column() {MC() // 實例化自定義組件Text('adf') // 使用系統組件MC()}}
}

組件的結構重用可以看這里：【HarmonyOS】ArkUI - 自定義組件和組件擴展