目錄

導言：開啟鴻蒙應用開發的新范式

ArkUI框架概覽 - 鴻蒙UI的靈魂

深入核心 - 聲明式UI開發范式

命令式 vs 聲明式：范式革命

ArkUI如何實現聲明式？

創建內置組件

創建自定義組件

自定義組件的基本結構

ArkUI框架的核心特性與優勢

ArkUI開發基礎 - 語言與工具

ArkUI的應用場景與未來展望

本章總結：擁抱未來UI開發范式

---

導言：開啟鴻蒙應用開發的新范式

歡迎進入鴻蒙應用開發的奇妙世界！在萬物互聯的時代，應用需要跨越手機、平板、智慧屏、手表、車機等多樣設備的邊界，提供無縫流轉、一致體驗的服務。這對傳統的UI開發模式提出了巨大挑戰。回顧傳統UI開發（如Android View系統）在多設備適配、代碼維護、開發效率上的瓶頸（如繁瑣的布局編寫、復雜的狀態管理、難以應對動態變化）。鴻蒙操作系統（HarmonyOS）為應對這一挑戰，推出了革命性的ArkUI框架。它不僅僅是一個UI庫，更代表了一種全新的開發理念和范式——聲明式UI開發。本章將帶您深入理解ArkUI的設計思想、核心特性、架構優勢以及它如何賦能開發者高效構建面向未來的全場景應用。這是您掌握鴻蒙開發精髓的第一步。

ArkUI框架概覽 - 鴻蒙UI的靈魂

什么是ArkUI？

ArkUI是HarmonyOS應用開發的UI開發框架，提供了一套簡潔自然的UI描述語法、豐富的UI組件以及強大的狀態管理機制。它是構建HarmonyOS應用用戶界面的基礎，是連接應用邏輯與用戶交互的橋梁。簡化開發、提升性能、實現跨設備一致性、支持動態響應。

ArkUI的誕生背景與使命

鴻蒙“1+8+N”戰略下，應用需無縫運行于不同屏幕尺寸、交互方式和能力的設備上。解決傳統開發模式代碼冗余、調試困難、學習曲線陡峭的問題。借鑒React、Flutter、SwiftUI等優秀框架的聲明式思想，并結合鴻蒙自身特性進行創新。

ArkUI的核心設計理念

• 聲明式UI (Declarative UI)：??開發者只需關注“UI應該是什么樣子”（What），而不是“如何一步步構建UI”（How）。框架負責根據狀態變化自動、高效地更新視圖。

• 組件化 (Component-Based)：?UI由可復用、可組合的組件構成，提高代碼復用率和可維護性。

• 狀態驅動 (State-Driven)：?UI是應用狀態的可視化表達。狀態變化是UI更新的唯一驅動力。

• 響應式設計 (Reactive Design)：?UI能夠自動響應狀態的變化和數據流的更新。

深入核心 - 聲明式UI開發范式

命令式 vs 聲明式：范式革命

• 命令式UI (Imperative UI - 傳統方式)：

  • 典型代表：Android View/XML, iOS UIKit。

  • 特點：開發者需要詳細指定構建UI的每一步操作（創建View、設置屬性、添加到父View、手動更新等）。需要直接操作DOM/View樹。

  • 痛點：代碼冗長、易出錯、狀態與UI同步邏輯復雜、跨設備適配困難。

  • 舉例說明：一個計數器按鈕的實現步驟（查找View、設置監聽器、在回調中查找TextView、更新文本）。

• 聲明式UI (Declarative UI - ArkUI方式)：

  • 特點：開發者只需根據當前應用狀態，描述UI最終應該呈現的樣子。框架負責將狀態渲染為UI，并在狀態變化時自動、高效地計算出最小的UI更新。

  • 核心優勢：

    • 代碼簡潔：?極大減少樣板代碼。

    • 邏輯清晰：?UI描述集中、直觀，狀態與UI綁定關系明確。

    • 高效更新：?框架進行智能Diffing，只更新必要的部分。

    • 易于維護：?狀態管理集中化，UI結構更易理解。

    • 天然支持響應式：?狀態變，UI自動變。

ArkUI如何實現聲明式？

• 基于組件的描述：?UI通過嵌套的組件樹來描述。

• 狀態與UI綁定：?使用特定的語法（如@State,?@Prop,?@Link等裝飾器）將UI組件的屬性或結構動態綁定到應用的狀態數據上。

• 響應式更新引擎：?框架內部維護一個虛擬的UI表示（類似Virtual DOM概念），監聽狀態變化。當狀態改變時，框架比較新舊虛擬表示，計算出最小變更集，然后高效地更新實際渲染的UI。

創建內置組件

創建組件的方式有兩種：無參數組件和帶參數組件。

無參數組件：創建組件時，未添加任何參數。

Column() {Divider()Button()
}

有參數組件：創建組件時，添加參數。

Column {Text("Hello HarmonyOS")
}

配置屬性：屬性方法以“.”鏈式調用配置組件樣式和其他屬性。

Column {Text("Hello HarmonyOS").fontSize(20).fontWeight(FontWeight.Bold)
}

配置事件：事件方法以“.”鏈式調用的方式配置系統組件支持的事件。

Column {Button("Hello").onClick(() => {console.log('Hello')})
}

創建自定義組件

在ArkUI框架中，自定義組件（Custom Component）是開發者根據自身業務需求，將UI元素、樣式、狀態和行為邏輯封裝成的獨立、可復用的單元。它不僅是代碼復用的利器，更是構建模塊化、可維護大型應用架構的核心。其特點主要體現在以下幾個方面：

• 高封裝性與內聚性：?自定義組件將實現特定功能或展現特定視圖所需的UI結構（build()方法）、樣式、狀態（@State,?@Prop等）以及交互邏輯（事件處理函數）?封裝在一個獨立的單元內。
• 強大的復用性：自定義組件可以在應用的多個地方（甚至不同項目）?重復使用，就像使用系統內置的Button、Text組件一樣。
• 靈活的可組合性：自定義組件本身可以作為更小組件的容器，也可以作為更大組件的組成部分。組件可以嵌套組合，形成復雜的UI樹。

@Component
struct CustomComponent {@state title: string = "Hello Harmony";build() {Row() {Text(this.title).onClick(() => {this.title = "Hi Harmony";})}}
}

在其他文件中引用自定義組件，需要使用export關鍵字導出組件。

import CustomComponent from '../common/component/CustomComponent';@Entry
@Component
struct Index {build() {Column() {Text("Hello HarmonyOS")CustomComponent({ message: 'Hello' })}}
}

自定義組件的基本結構

struct：自定義組件基于struct實現，struct + 自定義組件名 + {...}的組合構成自定義組件，不能有繼承關系。

@Component：裝飾器，具備以下特點。

1. @Component + struct：?定義了組件的基礎容器和身份。

2. 實現?build()：?定義了組件的核心功能 - UI 呈現。沒有?build()?的?@Component struct?是不完整的，無法渲染。

3. 單一?@Component?裝飾：?保證了組件定義的清晰性和唯一性，是框架正確管理和渲染組件樹的基礎。

@Component可以接受一個可選的boolean類型參數。

名稱	類型	必填	說明
freezeWhenInactive	boolean	否	是否開啟組件凍結。默認值false。true：開啟組件凍結，false：不開啟組件凍結。

@Component({ freezeWhenInactive: true })
struct MyComponent {}

build()函數：自定義組件必須使用的函數，用于聲明UI描述。

@Component
struct MyComponent {build() {}
}

@Entry：自定義組件的UI入口。@Entry可以接受參數。在單個UI頁面中，僅允許使用一次。

名稱	類型	必填	說明
routeName	string	否	表示作為命名路由頁面的名字。
storage	LocalStorage	否	頁面級的UI狀態存儲。
useSharedStorage	boolean	否	是否使用LocalStorage.getShared()接口返回的共享的LocalStorage實例對象。默認值false。true：使用共享的???????LocalStorage實例對象。false：不使用共享的???????LocalStorage實例對象。

@Entry({ routeName : 'myPage' })
@Component
struct MyComponent {
}

@Reusable：使組件具備可復用的能力。

@Reusable
@Component
struct MyComponent {
}

ArkUI框架的核心特性與優勢

1. 豐富的UI組件庫：

   • 提供大量開箱即用的基礎組件（Text,?Button,?Image,?TextInput等）和容器組件（Column,?Row,?Stack,?List,?Grid等）。

   • 針對鴻蒙特性提供專用組件（如分布式能力相關的組件）。

   • 支持自定義組件，滿足個性化需求。

2. 強大的狀態管理機制：

   • 多層級狀態管理裝飾器：?@State?(組件私有狀態),?@Prop?(父子單向同步),?@Link?(父子雙向同步),?@Provide/@Consume?(跨組件層級共享),?@Observed/@ObjectLink?(復雜對象狀態管理)。

   • 狀態管理庫：?支持更復雜應用的狀態管理方案（如基于ArkTS的輕量級狀態管理庫或結合第三方庫思想）。

   • 核心價值：?清晰界定狀態作用域，簡化數據流，確保UI與狀態一致性。

3. 高效的渲染機制：

   • 聲明式帶來的優化：?最小化UI更新范圍。

   • 平臺級優化：?鴻蒙系統底層對ArkUI渲染管線的深度優化。

   • 流暢體驗保障：?旨在為全場景設備提供流暢的60fps+用戶體驗。

4. 跨設備適配能力 (一次開發，多端部署)：

   • 響應式布局：?提供強大的彈性布局（Flex）、百分比、柵格系統、媒體查詢等能力，使UI能自適應不同屏幕尺寸。

   • 資源限定詞：?支持根據不同設備特性（屏幕密度、國家語言、橫豎屏等）加載不同的資源。

   • 組件能力差異化：?部分組件在不同設備類型上有不同的最佳實踐或形態，ArkUI框架提供了統一的描述和差異化的渲染支持。

ArkUI開發基礎 - 語言與工具

開發語言：ArkTS

• ArkUI框架主要使用ArkTS語言進行開發。

• ArkTS簡介：基于TypeScript (TS)，是鴻蒙生態的應用開發語言。它繼承了TS的靜態類型、面向對象、異步并發等特性，并針對鴻蒙開發進行了擴展和優化（如增加了上述狀態管理裝飾器）。

• 為什么選擇ArkTS？?類型安全、開發高效、生態兼容（TS生態龐大）、性能優良（AOT編譯）、為聲明式UI量身定制語法糖。

開發工具：DevEco Studio

• 官方集成開發環境 (IDE)，提供項目創建、代碼編輯、UI預覽、調試、模擬器/真機運行、應用打包等全套功能。

• 強大的UI預覽器：?支持多設備、多形態（折疊屏展開/折疊狀態）、深淺色主題、多語言的實時預覽，極大提升聲明式UI開發效率。

• 模擬器：?提供豐富的設備類型模擬器，方便跨設備調試。

ArkUI的應用場景與未來展望

典型應用場景：

• 全場景應用：?手機、平板、智慧屏、手表、車機等設備上的應用。

• 元服務 (原子化服務)：?鴻蒙特色的輕量化服務，ArkUI是其實現UI交互的主要技術。

• 富媒體、復雜交互應用：?利用其高效渲染和動畫能力。

• 需要高一致性和流暢體驗的應用。

未來發展趨勢：

• 更強大的開發工具鏈：?DevEco Studio持續增強對聲明式UI和狀態管理的支持。

• 更豐富的組件與能力：?官方持續擴充組件庫，集成更多鴻蒙分布式能力。

• 性能持續優化：?底層渲染引擎和AOT編譯的進一步優化。

• 社區生態壯大：?更多第三方UI庫、組件、工具涌現。

• AI賦能開發：?探索AI輔助生成UI代碼、智能布局的可能性。

本章總結：擁抱未來UI開發范式

ArkUI框架是鴻蒙應用開發的基石，其聲明式UI范式帶來了開發效率、代碼可維護性和跨設備能力的巨大飛躍。掌握ArkUI，不僅是學習一個新的UI框架，更是掌握構建未來全場景智慧應用的核心技能。本章為您建立了ArkUI的理論基礎。在接下來的章節中，我們將深入實踐，從搭建環境開始，一步步學習如何使用ArkTS和ArkUI組件構建出功能豐富、體驗卓越的鴻蒙應用！準備好動手了嗎？