鴻蒙期末總結

一、概念

HarmonyOS應用關鍵概念：元服務和App的關系

App具有手動下載安裝、包大小無限制、應用內或應用市場更新、全量功能等特征，可使用全量API
元服務具有免安裝、包大小有限制、即用即走、輕量化等特征，只能使用“元服務API集”
在這里插入圖片描述

鴻蒙的三大技術理念：一次開發，多端部署；可分可合，自由流轉；統一生態，原生智能
技術理念核心目標技術支撐典型應用場景
一次開發，多端部署降低多端開發成本統一開發框架、跨平臺編譯系統一套代碼適配手機、平板、智能手表等
可分可合，自由流轉實現跨設備資源與任務動態調度分布式軟總線、任務調度技術視頻/文件在不同設備間無縫流轉
統一生態，原生智能構建統一生態并賦予設備智能能力統一內核、AI引擎、分布式數據管理設備根據用戶習慣自動優化使用體驗

二、DevEco Studio的使用

1. 編輯器的代碼閱讀功能有哪些？
  • 代碼高亮：支持關鍵字、字符串等語法高亮，可在File > Settings > 編輯器 > 配色方案自定義顏色。
  • 快速跳轉：按住Ctrl點擊類、方法名可跳轉到定義處，多引用時支持彈窗選擇。
  • 代碼格式化：用Ctrl+Alt+L格式化代碼，通過//@formatter:off/on排除指定代碼塊。
  • 代碼折疊：點擊側邊欄按鈕或右鍵選擇折疊方式（如遞歸折疊）。
  • 快速注釋：選中代碼后按Ctrl+/添加/取消行注釋。
2. 如何實現ArkUI組件的預覽？
  • 頁面預覽：通過@Entry裝飾組件，在預覽器中直接顯示頁面效果。
  • 組件預覽：用@Preview裝飾自定義組件，單個文件最多10個，支持實時預覽但不支持動態數據。
3. 多設備預覽的實現步驟是什么？
  1. 在module.json5中配置deviceTypes（如["phone", "tablet"]）。
  2. 打開預覽器的Profile Manager，自定義設備分辨率和語言。
  3. 開啟Multi-profile preview開關，同時查看多設備顯示效果。
4. 模擬器的常用操作方式有哪些？
  • 交互操作：滑動屏幕（鼠標拖拽）、輸入文字（點擊輸入域后鍵盤輸入）、安裝應用（拖HAP包到屏幕）。
  • 工具欄功能：旋轉屏幕、調節音量、截屏、模擬電池/GPS狀態、搖一搖操作。
5. 模擬器與真機的核心差異有哪些？
  • 不支持功能：蜂窩網絡、拍照錄像、指紋識別、x86版本的華為推送和花瓣地圖。
  • 支持功能：ArkUI組件、WiFi連接、本地數據管理、HiLog日志。
6. 編輯器快捷鍵匯總
功能快捷鍵說明
代碼格式化Ctrl+Alt+L按預設規范格式化代碼
優化導入Ctrl+Alt+O清除未使用的import語句
快速注釋/取消注釋Ctrl+/行注釋切換
生成構造器/getsetAlt+Insert快速生成類成員方法
代碼跳轉Ctrl+點擊跳轉到定義處
7. 模擬器支持的設備類型與平臺
設備類型支持平臺API版本
手機、折疊屏Windows x86、Mac x86/armAPI 11、12
平板、2in1Windows x86、Mac x86/armAPI 11、12
8. 預覽器核心功能對比
功能頁面預覽組件預覽
裝飾器@Entry@Preview
動態數據支持支持不支持
單個文件限制1個最多10個
使用場景整體頁面效果調試獨立組件樣式調試
9. 代碼重構功能列表
功能說明
提取變量將表達式提取為常量
提取方法將代碼塊提取為新函數
優化導入合并/排序import語句，清除未使用項
重命名批量重命名變量/方法/類

三、ArkTS基礎語法

1. 變量
[修飾符] 變量名[: 類型] [= 初始值];@State count: number = 0;          // 帶修飾符、有類型、有初值
let name = "HarmonyOS";           // 無修飾符、有初值、類型推導
const PI: number = 3.14;          // 常量，有類型、有初值
submitArrow?: () => void;         // 可選函數類型屬性

注意變量必須賦值，且若沒有聯合類型包括null時，不可賦值為null
以下是鴻蒙（HarmonyOS）開發中常用變量類型的總結（基于ArkTS語言體系）：

類型名稱說明示例
基本類型
number數值類型，包含整數和浮點數let num: number = 10;
string字符串類型，支持Unicode字符let str: string = "鴻蒙系統";
boolean布爾類型，值為true或falselet isReady: boolean = true;
null空值類型，表示變量無實際值let empty: null = null;
undefined未定義類型，變量聲明未初始化時的默認值let uninit: undefined;
void無返回值類型，常用于函數聲明function fn(): void { ... }
引用類型
Array<T>數組類型，元素類型由泛型T指定let arr: number[] = [1, 2, 3];
Object對象類型，包含鍵值對結構let obj: Object = { name: "鴻蒙" };
Function函數類型，用于聲明函數變量或參數let func: (a: number) => string;
鴻蒙特化類型
ResourceStr字符串資源類型，用于引用工程中的字符串資源（如strings.json）@Entry @Component struct Index {<br> @State str: ResourceStr = $r('app.string.hello');<br>}
ResourceColor顏色資源類型，用于引用工程中的顏色資源（如colors.json）let color: ResourceColor = $r('app.color.primary');
ResourceFile文件資源類型，用于引用工程中的文件資源（如圖像、字體等）let img: ResourceFile = $r('app.media.icon');
裝飾器關聯類型
@State組件內部狀態變量，狀態變化觸發UI更新（非嚴格數據類型，需配合裝飾器使用）@State count: number = 0;
@Prop子組件接收父組件傳遞的屬性變量@Prop name: string;
@Link雙向綁定變量，父子組件狀態同步@Link isActive: boolean;

詳情見 鴻蒙開發 變量的定義和常用關鍵字屬性總結

2. 函數

定義

function 函數名(參數列表): 返回類型 {// 函數體
}

函數定義方式匯總
=>后面跟的是函數的返回值，相當于return

方式示例說明
命名函數function add(a: number, b: number): number {...}標準命名形式
匿名函數const fn = function(a: number) { ... }函數作為變量賦值
箭頭函數const fn = (a: number) => a * 2簡潔形式，常用于回調
可選參數function greet(name?: string) { ... }參數可以不傳
默認參數function greet(name: string = "Guest") { ... }傳參為空時使用默認值
剩余參數function sum(...nums: number[]) { ... }不定數量參數
函數類型定義let fn: (x: number) => void聲明函數類型變量
函數返回函數（高階）function outer(): () => void { ... }返回一個函數

函數定義中涉及的關鍵點

特性說明
?參數可選
=參數默認值
...剩余參數
=>箭頭函數（無 this 綁定）
類型注解參數與返回值都應明確類型（ArkTS 強類型）
可選鏈調用fn?.() 調用可選函數變量

常見用于函數的 @ 修飾符匯總

裝飾器使用位置作用描述示例
@Builder函數表示該函數用于描述 UI 結構（ArkTS 的聲明式 UI 構建核心）@Builder buildUI() { ... }
@Entry組件類/函數表示應用的入口組件或入口構建函數@Entry buildApp() { ... }
@Component函數/類聲明這是一個組件定義（可視圖結構）@Component struct MyButton {}
@Styles函數定義樣式構建函數（搭配 @Builder）@Styles styleFn() { ... }
@Preview函數在 DevEco Studio 中預覽函數結果（僅開發預覽用）@Preview previewUI() { ... }
@Provide函數/變量向下傳遞依賴注入數據@Provide('theme') getTheme() {}

詳情見 鴻蒙開發-函數的定義總結

3. 裝飾器
裝飾器用途限制規則示例
組件定義
@Entry標記組件為頁面入口，每個頁面必須有且僅有一個@Entry組件- 必須在@Component類上使用
- 每個頁面（.ets文件）只能有一個
- 通常位于頂層組件		typescript<br>@Entry<br>@Component<br>struct Index {<br> build() { ... }<br>}<br>
@Component聲明類為ArkUI組件- 必須用于類聲明
- 類必須包含build()方法定義UI結構		typescript<br>@Component<br>struct MyComponent {<br> build() { ... }<br>}<br>
狀態管理
@State聲明組件內部響應式狀態變量，值變化觸發UI刷新- 必須顯式指定類型
- 必須初始化（如@State count: number = 0）
- 只能在@Component類中使用		typescript<br>@State message: string = 'Hello';<br>
@Prop聲明子組件接收父組件傳遞的單向數據（屬性）- 必須顯式指定類型
- 不能初始化（由父組件賦值）
- 子組件中不可修改（只讀）		typescript<br>// 父組件<br><ChildComponent title="父數據" /><br>// 子組件<br>@Prop title: string;<br>
@Link聲明雙向綁定變量，與父組件狀態同步- 必須顯式指定類型
- 必須通過.link()方法初始化（如@Link value: number = this.parentValue.link()）
- 父子組件均可修改		typescript<br>// 父組件<br>@State parentValue: number = 10;<br>// 子組件<br>@Link childValue: number = this.parentValue.link();<br>
@Provide聲明向子組件樹提供的共享數據- 必須顯式指定類型
- 必須初始化
- 可在任意層級子組件中通過@Consume接收		typescript<br>// 祖先組件<br>@Provide theme: string = 'light';<br>// 子組件<br>@Consume theme: string;<br>
@Consume聲明接收祖先組件通過@Provide提供的數據- 必須顯式指定類型
- 不可初始化（自動關聯@Provide）
- 子組件中不可修改（只讀）		typescript<br>@Consume sharedData: string;<br>
@StorageLink聲明與本地存儲（Preferences）綁定的響應式變量- 必須顯式指定類型
- 必須通過@StorageLink('key')初始化
- 支持基本類型和簡單對象		typescript<br>@StorageLink('userInfo') user: User = new User();<br>
@StorageProp聲明從本地存儲讀取的單向數據- 必須顯式指定類型
- 不可初始化（從存儲讀取）
- 組件內不可修改（只讀）		typescript<br>@StorageProp('username') name: string;<br>
生命周期
@Builder標記函數作為UI構建器，用于封裝重復UI邏輯- 必須用于函數聲明
- 函數返回類型必須為void
- 函數內部必須調用UI組件		typescript<br>@Builder<br>Header() {<br> Text('標題').fontSize(20)<br>}<br>
自定義組件
@Extend標記組件擴展另一個組件的屬性和方法- 必須用于類聲明
- 被擴展的組件必須使用@Component裝飾器		typescript<br>@Component<br>struct BaseComponent { ... }<br>@Extend(BaseComponent)<br>struct ExtendedComponent { ... }<br>
@CustomDialog聲明自定義對話框組件- 必須用于類聲明
- 類必須包含build()方法定義對話框內容		typescript<br>@CustomDialog<br>struct MyDialog {<br> aboutToAppear() { ... }<br> build() { ... }<br>}<br>
@Preview聲明組件預覽，用于DevEco Studio預覽面板展示- 必須用于類聲明
- 類必須使用@Component裝飾器
- 不影響實際運行邏輯		typescript<br>@Preview<br>@Component<br>struct PreviewComponent {<br> build() { ... }<br>}<br>

詳情見 鴻蒙期末復習-裝飾器篇

三、框架

3.1. 多Module設計機制核心特性

  1. 模塊化開發

    • 設計理念：將應用功能按模塊拆分，每個Module獨立包含源代碼、資源、第三方庫及配置文件，支持獨立編譯，實現松耦合的開發模式。
    • 優勢：簡化復雜應用的開發流程，便于團隊協作、功能迭代與維護擴展。

  2. 多設備適配

    • 設備類型標注：每個Module可指定支持的設備類型（如手機、平板、智能穿戴等）。
    • 分發策略：應用市場根據設備類型篩選匹配Module，實現精準部署，優化不同設備的資源占用與功能適配。
1. Ability類型Module（功能實現模塊）
類型作用編譯產物特性
entry Module應用主模塊，包含入口界面、圖標及核心功能entry類型HAP每個設備的應用包只能有一個entry HAP，是應用啟動的入口。
feature Module動態特性模塊，實現可按需加載的功能（如插件、擴展功能）feature類型HAP可包含多個，按需集成到應用中，提升安裝包輕量化與功能靈活性。
  • HAP包（Harmony Ability Package）：Ability類型Module的編譯產物，是應用安裝的基本單位，可獨立運行。
2. Library類型Module（代碼與資源共享模塊）
類型編譯產物作用特性
Static Library.har（靜態共享包）封裝可復用的代碼與資源，被其他Module引用時直接嵌入目標包。編譯時靜態鏈接，包體積較大，但運行效率高。
Shared Library.hsp（動態共享包）
.har（接口描述文件）		動態共享代碼與資源，運行時按需加載，多個Module可共享同一實例。編譯生成.hsp（包含實現）和.har（包含接口），引用時通過.har調用.hsp功能，降低包體積。
  • HAR（Harmony Archive）：靜態共享包，用于封裝可復用的模塊資源。
  • HSP（Harmony Shared Package）：動態共享包，支持運行時動態加載，提升應用模塊化能力。
    在這里插入圖片描述
    在這里插入圖片描述
    更多詳見 期末考試復習總結-《應用程序框架基礎》
3.2. UIAbility的生命周期

在這里插入圖片描述
在這里插入圖片描述
（1）Create狀態
? Create狀態為UIAbility實例創建完成時觸發，系統會調用onCreate()回調。可以在該回調中進行頁面初始化操作，例如變量定義、資源加載等。
（2）WindowStageCreate和WindowStageDestroy狀態
? UIAbility實例創建完成之后，在進入Foreground之前，系統會創建一個WindowStage。
（3）WindowStageWillDestroy狀態
（4）Foreground和Background狀態
? onForeground()回調，在UIAbility切換至前臺時觸發。
? onBackground()回調，在UIAbility切換至后臺時候觸發。
? 例如應用在使用過程中需要使用用戶定位時，假設應用已獲得用戶的定位權限授權。在UI顯示之
前，可以在onForeground()回調中開啟定位功能，從而獲取到當前的位置信息。
? 當應用切換到后臺狀態，可以在onBackground()回調中停止定位功能，以節省系統的資源消耗。
（5）Destroy狀態
? Destroy狀態在UIAbility實例銷毀時觸發。可以在onDestroy()回調中進行系統資源的釋放、數據的
保存等操作。
在這里插入圖片描述

3.3.組件啟動模式

UIAbility的啟動模式是指UIAbility實例在啟動時的不同呈現狀態。針對不同的業務場景，系統提供
了三種啟動模式：
? singleton（單實例模式）
singleton啟動模式為單實例模式，也是默認情況下的啟動模式。調用startAbility()方法時，如果應用進程中該類型的UIAbility實例已經存在，則復用系統中的UIAbility實例。系統中只存在唯一一個該UIAbility實例，即在最近任務列表中只存在一個該類型的UIAbility實例。
? multiton（多實例模式）
multiton啟動模式為多實例模式，每次調用startAbility()方法時，都會在應用進程中創建一個新的該類型UIAbility實例。即在最近任務列表中可以看到有多個該類型的UIAbility實例。
? specified（指定實例模式）
specified啟動模式為指定實例模式，針對一些特殊場景使用（例如文檔應用中每次新建文檔希望都能新建一個文檔實例，重復打開一個已保存的文檔希望打開的都是同一個文檔實例）。

3.4.Page Ability 生命周期

詳情見 鴻蒙考試-Ability生命周期篇

生命周期階段對比

  1. UIAbility（框架層組件）

    • 鴻蒙應用框架的核心組件，負責管理應用的窗口、生命周期及跨設備能力（如多窗口、跨端遷移）。
    • 是系統調度的基本單元，每個UIAbility對應一個獨立的任務窗口。

  2. Page Ability（UI層頁面）

    • 基于ArkUI框架的頁面組件，是UIAbility的具體實現，負責頁面UI的渲染和交互邏輯。
    • 屬于UIAbility的內部頁面管理范疇，生命周期受UIAbility控制。
UIAbility生命周期Page Ability生命周期聯系區別
Create（onCreate）onInitUIAbility創建時觸發Page的初始化，兩者均用于資源初始化（變量、監聽注冊）。UIAbility側重組件級資源加載，Page側重頁面級數據初始化。
WindowStageCreateonReadyWindowStage創建完成后，Page的UI加載完成，可動態修改布局。UIAbility關注窗口創建，Page關注UI渲染完成。
Foreground（onForeground）onShow + onActiveUIAbility切換至前臺時，Page先顯示（onShow）后獲取焦點（onActive）。UIAbility的前臺狀態對應Page的“可見且可交互”，Page細分了顯示與焦點狀態。
Background（onBackground）onInactive + onHideUIAbility切后臺時，Page先失去焦點（onInactive）后隱藏（onHide）。UIAbility的后臺狀態對應Page的“不可見或不可交互”，Page細分了焦點與隱藏狀態。
Destroy（onDestroy）onDestroyUIAbility銷毀時，Page隨之銷毀，均用于釋放資源（注銷監聽、保存數據）。UIAbility銷毀會觸發Page銷毀，Page無法獨立于UIAbility存在。
3.5.配置文件

主要配置文件概述

配置文件名稱存儲位置主要作用
app.json5項目根目錄應用全局配置，定義應用基本信息（如包名、版本、模塊列表等）
module.json5各模塊根目錄（如entry/src/main）模塊級配置，聲明模塊能力（UIAbility、服務等）、權限、設備支持類型等
build-profile.json5項目根目錄build文件夾構建配置，定義編譯參數、簽名信息、產物輸出路徑等
entry.json（可選）部分舊項目早期版本配置文件，現逐步被module.json5替代
1. app.json5 常用選項
字段名稱所屬層級作用描述
app.nameapp應用顯示名稱
app.packageapp應用包名（唯一標識）
app.versionapp應用版本信息（code和name）
modules根層級定義應用包含的模塊列表，每個模塊需指定類型（如entry）和路徑
deviceConfig根層級設備相關配置（如不同設備的差異化參數）
2. module.json5 常用選項
字段名稱所屬層級作用描述
abilitiesmodule聲明模塊中的UIAbility組件，包含名稱、入口路徑、圖標等信息
deviceTypesmodule標識模塊支持的設備類型（如phone、tablet、wearable等）
requestPermissionsmodule聲明應用需要申請的系統權限（如定位、存儲等）
namemodule模塊名稱（如entry）
descriptionmodule模塊描述信息
distromodule模塊分發配置（如是否為系統模塊）
3. build-profile.json5 常用選項
字段名稱所屬層級作用描述
buildOption根層級構建選項，包含編譯參數、產物類型（app/hap）、簽名配置引用等
signingConfigs根層級簽名配置，存儲證書和密鑰信息（調試版和發布版）
targets根層級構建目標配置（如編譯平臺、ABI類型）
outputPathbuildOption構建產物輸出路徑
compileSdkVersionbuildOption編譯使用的SDK版本
targetSdkVersionbuildOption目標SDK版本（影響API兼容性）
3.6. 一些規定
規則類型具體規則限制說明示例/注意事項
聲明式UI構建（@Builder）禁止使用普通for循環，需用List.forEach或循環組件（如ForEach）。聲明式UI要求UI可重建，普通循環無法被框架追蹤狀態變化，可能導致UI更新異常。typescript<br>// 錯誤：build中不能用for<br>for (let i = 0; i < 5; i++) {}<br>// 正確：<br>[1,2,3].forEach(item => {})<br>// 或使用ForEach組件<br><ForEach elements={list} item={item => <Text>{item}</Text>}></ForEach>
函數定義自定義UI構建函數必須使用@Builder裝飾，禁止普通函數。@Builder裝飾器確保函數在UI狀態變化時可被框架觸發重建，普通函數無法參與UI更新流程。typescript<br>// 錯誤：<br>function CommonFunc() {}<br>// 正確：<br>@Builder MyBuilder() {}
狀態變量聲明組件內狀態變量必須使用@State、@Link、@Prop等裝飾器，禁止普通變量。裝飾器用于標記狀態依賴關系，框架通過裝飾器追蹤變化并觸發UI更新，普通變量無法觸發更新。typescript<br>// 錯誤：<br>let count = 0;<br>// 正確：<br>@State count: number = 0;
組件命名與結構組件名稱必須以大寫字母開頭，且文件名與組件名一致；@Entry組件必須包含build函數。遵循駝峰命名規范，確保框架能正確識別組件；build函數是UI渲染的入口。typescript<br>// 組件文件必須為MyComponent.ets，組件名MyComponent<br>@Entry<br>struct MyApp {<br> build() { ... }<br>}
語法限制禁止在build函數中使用try-catch、throw等異常處理語法（部分場景允許）。build函數需保持純粹的UI描述，異常處理可能破壞UI重建邏輯。typescript<br>// 建議在業務邏輯中處理異常，而非build內<br>function handleError() {<br> try { ... } catch(e) { ... }<br>}
模塊依賴entry模塊禁止直接引用feature模塊資源，需通過har包共享。模塊化設計要求隔離業務模塊，feature模塊需編譯為har供entry引用。-

四、UI樣式

4.1. 圖片
4.2. 布局
4.2.1 Grid 布局相關知識總結表
屬性/概念說明示例/用法
Grid 容器基于網格的二維布局容器，通過行（rows）和列（columns）定義子組件位置。<Grid columnsTemplate="1fr 1fr" rowsTemplate="50vp 50vp">...</Grid>
columnsTemplate定義列寬，支持fr（比例單位）、px、vp等單位，多個值用空格分隔。columnsTemplate="1fr 2fr"：兩列寬度比例為1:2
columnsTemplate="100px 50%"：第一列100px，第二列占容器寬度50%
rowsTemplate定義行高，單位與columnsTemplate一致。rowsTemplate="80vp 1fr"：第一行80vp，第二行占剩余空間比例1fr
fr 單位彈性比例單位，基于容器剩余空間分配。1fr表示1份，2fr表示2份，依此類推。columnsTemplate="1fr 3fr"：兩列寬度比為1:3
GridItem 定位通過gridColumn（列）和gridRow（行）指定子組件所在網格位置。<GridItem gridColumn="1" gridRow="2">...</GridItem>：位于第1列第2行
常用布局場景- 等寬列：columnsTemplate="1fr 1fr 1fr"（三列等寬）
- 固定+彈性列：columnsTemplate="120px 1fr"（第一列120px，第二列占剩余空間）
與Row/Column的區別Grid是二維布局（行列交叉），Row/Column是一維布局（水平/垂直方向）。復雜網格布局（如表格、宮格）優先使用Grid，簡單線性排列用Row/Column。
4.2.2 對齊
場景Start/End 的含義Center 的含義
Row 主軸水平方向的左/右對齊水平居中
Column 主軸垂直方向的上/下對齊垂直居中
Row/Column 交叉軸垂直/水平方向的頂部/底部對齊（Row用VerticalAlign）垂直/水平居中（Row用VerticalAlign.Center）
文本對齊文本起始/結束位置對齊（與閱讀方向有關）文本居中
場景Top/Bottom 的含義Center 的含義
Row 交叉軸垂直方向的頂部/底部對齊垂直居中
Stack 定位子組件居頂部/底部（水平默認居中）完全居中
Swiper 指示器指示器位置居頂部/底部指示器垂直居中
Dialog 位置對話框從頂部/底部彈出對話框居中顯示
4.2.3 Tabs組件
屬性/概念說明示例/用法
BarPosition導航欄在主軸方向的對齊位置，枚舉值：
- Start：起始端
- End：結束端
- Center：居中
- Float：懸浮		<Tabs barPosition={BarPosition.End}>...</Tabs>：導航欄在底部或右側（取決于vertical）
vertical控制Tabs布局方向：
- false（默認）：水平布局（導航欄在上，內容在下）
- true：垂直布局（導航欄與內容左右排列）		<Tabs vertical={true}>...</Tabs>：垂直布局，導航欄與內容區水平排列
BarMode導航欄顯示模式，枚舉值：
- Scrollable：可滾動（標簽過多時）
- Fixed：固定寬度（均分容器寬度）		<Tabs barMode={BarMode.Scrollable}>...</Tabs>：標簽過多時可橫向滾動
Index當前選中標簽的索引（從0開始）。<Tabs index={1}>...</Tabs>：默認選中第2個標簽
TabContent標簽內容容器，每個標簽對應一個TabContent。<TabContent tabBar={<Text>標簽1</Text>}>內容1</TabContent>
常用布局場景- 頂部導航：vertical=false（默認），barPosition=BarPosition.Start
- 底部導航：vertical=false，barPosition=BarPosition.End
- 左側導航：vertical=true，barPosition=BarPosition.Start
- 右側導航：vertical=true，barPosition=BarPosition.End
4.2.4 子組件

特定容器組件有固定子元素類型

List → 僅允許包含ListItem
Grid → 僅允許包含GridItem
TabContent → 僅允許包含TabPane
Stack → 僅允許包含StackItem

布局組件（Column/Row/Stack）可自由嵌套

布局組件可作為外層包裹容器組件（如Column>List），或作為容器子元素的內部布局（如ListItem>Row）
4.2.5 Swiper組件
屬性名類型默認值作用
loopbooleanfalse是否開啟循環輪播，true時首尾頁無縫銜接（如從最后一頁切到第一頁）。
autoPlaybooleanfalse是否自動輪播，開啟后按interval間隔切換。
intervalnumber3000自動輪播間隔時間（毫秒）。
durationnumber500切換動畫時長（毫秒）。
verticalbooleanfalse輪播方向，true為垂直滾動，false為水平滾動。
indexnumber0當前顯示的子項索引，可雙向綁定實現編程控制。
showPaginationbooleantrue是否顯示導航點（分頁指示器）。
paginationStyleobject-導航點樣式（顏色、大小、選中狀態等）。
4.3. 文本
4.3.1 TextDecoration 相關知識總結表
屬性類型合法值示例用法
decoration，
需同時設置 type、color、style 三個子屬性，缺一不可。		TextDecoration{ type: TextDecorationType, color: Color, style: TextDecorationStyle }<Text decoration={{ type: TextDecorationType.LineThrough, color: Color.Red }}>刪除文本</Text>
TextDecorationType枚舉None
LineThrough
Underline（底部裝飾線）		<Text decoration={{ type: TextDecorationType.Underline }}>下劃線</Text>
TextDecorationStyle枚舉Solid
Double
Dotted
Dashed
Wavy		<Text decoration={{ type: TextDecorationType.Underline, style: TextDecorationStyle.Dotted }}>虛線</Text>
TextDecorationColorColor支持顏色值（如 Color.Red、#FF0000、rgba(255,0,0,1)）<Text decoration={{ type: TextDecorationType.Underline, color: '#FF0000' }}>紅色下劃線</Text>
4.4 導航

核心跳轉方法對比

方法名作用描述參數說明頁面棧變化
pushPathByName入棧新頁面，保留當前頁面在棧中pageName（頁面名稱）、params（路由參數）、animate（是否動畫，默認true）棧深度+1，新頁面成為棧頂
replacePathByName替換棧頂頁面，原棧頂頁面出棧pageName、params、animate（同上）棧頂元素替換，棧深度不變
pop()彈出棧頂頁面，返回上一頁無參數棧深度-1，上一頁成為棧頂
popToPage()彈出至指定頁面，中間頁面全部出棧pageName（目標頁面名稱）棧深度調整為目標頁面的位置
clearAndPushPath()清空棧中所有頁面，再入棧新頁面pageName、params、animate棧重置為僅包含新頁面

路由參數傳遞方式

方式說明示例
基本參數傳遞通過路由參數對象傳遞簡單數據（字符串、數值、布爾等）{ key: 'value', num: 123 }
跨頁面數據共享使用AppStorage或GlobalContext實現全局數據共享，適合大數據或復雜對象傳遞AppStorage.SetOrCreate('dataKey', dataValue)
URI路由傳遞通過URI格式傳遞參數（適用于跨應用跳轉）pushPathByName('pages/Detail', { uri: 'detail?param1=1&param2=abc' })

鴻蒙 Navigation 布局模式

模式名稱英文名稱應用場景典型界面
單頁面模式SinglePage內容在同一頁面內切換，無頁面跳轉，適合簡單信息展示或標簽式導航。底部Tab導航、標簽頁（Tabs）
層疊模式Stack頁面按棧結構管理，支持前進/后退邏輯，符合移動端用戶習慣。傳統App的頁面跳轉（如詳情頁→列表頁）
分欄模式Split大屏設備專屬，左右分欄顯示導航與內容，支持自適應切換（大屏分欄/小屏層疊）。平板端的文件管理器（左側目錄+右側內容）

不同導航位置的配置組合

導航位置verticalbarPosition布局效果
頂部導航falseStart導航欄在頂部，內容區在下方，標簽從左到右排列。
底部導航falseEnd導航欄在底部，內容區在上方，標簽從左到右排列。
左側導航trueStart導航欄在左側，內容區在右側，標簽從上到下排列。
右側導航trueEnd導航欄在右側，內容區在左側，標簽從上到下排列。
頂部居中falseCenter導航欄在頂部且居中，內容區在下方。
懸浮導航falseFloat導航欄懸浮在內容區上方（通常帶背景色和陰影）。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/909224.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/909224.shtml
英文地址，請注明出處：http://en.pswp.cn/news/909224.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

Vue3 + TypeScript + Element Plus 表格行按鈕不觸發 row-click 事件、不觸發勾選行，只執行按鈕的 click 事件

Vue3 + TypeScript + Element Plus 表格行按鈕不觸發 row-click 事件、不觸發勾選行，只執行按鈕的 click 事件

點擊表格行按鈕不觸發 row-click 事件、不觸發勾選行&#xff0c;只執行按鈕的 click 事件 點擊第一行的【編輯】&#xff0c;第一行為當前選擇行&#xff0c; 同時也勾選了復選框&#xff0c;也會執行 row-click 事件 原來的代碼&#xff1a; <el-table-column label"…
閱讀更多...
SiteAzure4.x 版本 訪問html靜態頁文件出現404錯誤

SiteAzure4.x 版本 訪問html靜態頁文件出現404錯誤

問題描述&#xff1a; SiteAzure4.*版本&#xff0c;在upload文件夾中放置了html靜態頁文件&#xff0c;訪問出現404錯誤 問題分析&#xff1a; 1、確認訪問路徑是否正確以及文件是否存在 2、確認相應文件夾權限是否正確 3、確認IIS默認文檔是否允許靜態頁&#xff0c;MIM…
閱讀更多...
[免費]微信小程序音樂播放器(爬取網易云音樂數據)(node.js后端)【論文+源碼】

[免費]微信小程序音樂播放器(爬取網易云音樂數據)(node.js后端)【論文+源碼】

大家好&#xff0c;我是java1234_小鋒老師&#xff0c;看到一個不錯的微信小程序音樂播放器(爬取網易云音樂數據)(node.js后端)&#xff0c;分享下哈。 項目視頻演示 【免費】微信小程序音樂播放器(爬取網易云音樂數據)(node.js后端) 微信小程序畢業設計_嗶哩嗶哩_bilibili …
閱讀更多...
強化學習：策略梯度概念

強化學習：策略梯度概念

2.策略梯度方法 目標是使策略 不斷更新&#xff0c;回報更高。 計算每一個軌跡的回報&#xff0c;和對應的概率 目標是使回報高的軌跡概率應該高。這樣整個策略的期望回報也會高。 什么是策略期望回報&#xff1f; 就是用這個策略跑了若干個軌跡&#xff0c;得到回報&#x…
閱讀更多...
Java 中高級開發崗技能與面試要點梳理

Java 中高級開發崗技能與面試要點梳理

目錄 一、核心技術深度掌握 （一）Java 語言高階特性 JVM 底層原理剖析 并發編程高級應用 Java 新特性實戰 （二）主流框架與中間件精通 Spring 生態全面掌控 分布式中間件實戰精通 （三）數據庫與存儲優化專家 SQL 與 ORM 高級應用 分庫分表實戰 NoSQL 實戰（Elas…
閱讀更多...
職場生存發展指南 | 邊界 / 責任 / 社交 / 情緒

職場生存發展指南 | 邊界 / 責任 / 社交 / 情緒

注&#xff1a;本文為“職場生存發展”相關合輯。 略作重排&#xff0c;未整理去重。 如有內容異常&#xff0c;請看原文。 職場生存發展指南 | 邊界 / 責任 / 社交 / 情緒 職場如江湖&#xff0c;充滿機遇與挑戰。在單位中立足&#xff0c;需深諳生存智慧——既要守住底線、…
閱讀更多...
vue3 daterange正則踩坑

vue3 daterange正則踩坑

<el-form-item label"空置時間" prop"vacantTime"> <el-date-picker v-model"form.vacantTime" type"daterange" start-placeholder"開始日期" end-placeholder"結束日期" clearable :editable"fal…
閱讀更多...
linux中執行腳本命令的source和“.”和“./”的區別

linux中執行腳本命令的source和“.”和“./”的區別

在 Linux 或類 Unix 系統中&#xff0c;source、. 和 ./ 的使用場景各有不同&#xff0c;以下詳細介紹何時使用它們&#xff1a; 命令用途適合場景source和“.”等效。腳本在當前 shell 環境中執行并影響當前 shell 的狀態和環境變量 1. 加載環境變量配置文件&#xff0c;無需…
閱讀更多...
games101 hw1

games101 hw1

原理 背景 將三維空間中一個旋轉的三角形&#xff0c;顯示在屏幕上。 假設三角形初始點位為 v0(2.0, 0.0, ?2.0), v1(0.0, 2.0, ?2.0), v2(?2.0, 0.0, ?2.0), 你需要將這三個點的坐標變換為屏幕坐標并在屏幕上繪制出對應的線框三角形。 mvp AI回答&#xff1a; 在計算機…
閱讀更多...
Mybatis逆向工程詳解（附源碼文件）動態創建實體類、條件擴展類、Mapper接口、Mapper.xml映射文件

Mybatis逆向工程詳解（附源碼文件）動態創建實體類、條件擴展類、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的學習進度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步楊帆旗航。 那么接下來就給大家出一期有關 Mybatis 逆向工程的教學&#xff0c;希望能對大家有所幫助&#xff0c;也特別歡迎大家指點不足之處&#xff0c;小生很樂意接受正確的建議&…
閱讀更多...
android studio中修改java邏輯對應配置的xml文件

android studio中修改java邏輯對應配置的xml文件

在android studio新建一個activity&#xff0c;自動生成一個xml&#xff0c;可以更改到另一個xml嗎&#xff1f; 可以。 新建一個activity&#xff1a; 如下 上圖中的activity_second為xml文件&#xff0c;SecondActivity為java文件。點擊后&#xff0c; AndroidManifest.x…
閱讀更多...
@SchedulerLock處理Spring Task在分布式環境下的重復執行問題

@SchedulerLock處理Spring Task在分布式環境下的重復執行問題

本文大綱&#x1f4d6; 1、背景&#x1f342;2、SchedulerLock注解3、實現原理 1、背景&#x1f342; Spring生態下&#xff0c;日常開發定時任務&#xff0c;使用Spring Task框架還是很常見的選擇&#xff0c;但Spring Task并不是為分布式環境設計的&#xff0c;分布式環境下…
閱讀更多...
Prompt工程指南中文版

Prompt工程指南中文版

Prompt-Engineering-Guide-zh Prompt工程指南中文版 github 本文翻譯改編自 Dair-ai/Prompt-Engineering-Guide 中文原帖地址為 大型語言模型Prompt書寫指南 為了方便理解以及補充缺少的知識點&#xff0c;內容有所添改。除非另有說明&#xff0c;本文中所有的例子都是使用te…
閱讀更多...
「pandas 與 numpy」數據分析與處理全流程【數據分析全棧攻略：爬蟲+處理+可視化+報告】

「pandas 與 numpy」數據分析與處理全流程【數據分析全棧攻略：爬蟲+處理+可視化+報告】

- 第 106 篇 - Date: 2025 - 06 - 12 Author: 鄭龍浩&#xff08;仟墨&#xff09; 文中使用的所有文件在文章頂部的資源展示 數據分析與處理 「pandas 與 numpy」 文章目錄 數據分析與處理 「pandas 與 numpy」一了解數據處理1 數據處理2 數據分析第三方庫 二 numpy1 基本介紹…
閱讀更多...
Fastapi + vue3 自動化測試平臺（6）：AI + Web UI的完美結合

Fastapi + vue3 自動化測試平臺（6）：AI + Web UI的完美結合

&#x1f916;? AI Web自動化革命&#xff1a;用自然語言重塑測試體驗&#xff01; 基于FastAPI Vue3的下一代Web自動化測試平臺誕生&#xff01;將大語言模型 與 Web UI自動化深度結合&#xff0c;讓測試腳本維護進入自然語言時代 —— 告別繁瑣代碼&#xff0c;擁抱智能測…
閱讀更多...
【QT】 QGraphicsItem 獲取點坐標的幾種方法

【QT】 QGraphicsItem 獲取點坐標的幾種方法

目錄 1. 獲取圖元在場景中的位置 對于 QGraphicsEllipseItem&#xff08;點圖元&#xff09; 2. 從 QMap 獲取所有點坐標 3. 響應點擊事件獲取坐標 4. 獲取選中點的坐標 5. 坐標轉換說明 注意事項 在 Qt 圖形視圖框架中&#xff0c;從 QGraphicsItem&#xff08;特別是點…
閱讀更多...
伊吖學C筆記（6、數、求和、排列）

伊吖學C筆記（6、數、求和、排列）

一、數 1.自然數、奇偶數 自然數也就是非負整數&#xff0c;C的循環語句很容易輸出自然數&#xff0c;比如&#xff1a;輸出100以內的自然數。 奇數、偶數也都是自然數&#xff1a; 2. 約數、因數 題目&#xff1a;一個數如果恰好等于它的因子之和&#xff0c;這個數就稱為“…
閱讀更多...
SpringMVC與Struts2對比教學

SpringMVC與Struts2對比教學

SpringMVC 和 Struts2 就像武林中的兩大門派&#xff0c;雖然都是處理 Web 請求的高手&#xff08;MVC 框架&#xff09;&#xff0c;但招式風格和內功心法大不相同。來&#xff0c;咱們用最接地氣的方式掰扯掰扯&#xff0c;保準你笑著記住&#xff01; 核心區別一句話概括&a…
閱讀更多...
Nginx配置指南與最佳實踐

Nginx配置指南與最佳實踐

Nginx 的配置文件通常位于 /etc/nginx/nginx.conf&#xff0c;并通過 include 指令加載其他目錄&#xff08;如 /etc/nginx/conf.d/ 或 /etc/nginx/sites-enabled/&#xff09;中的配置片段。以下是一個結構化指南&#xff1a; 核心配置結構 # 全局配置 (主上下文) user nginx…
閱讀更多...
Apache 反向代理Unity服務器

Apache 反向代理Unity服務器

Apache 反向代理Unity服務器 前言項目使用PHPStudy開啟服務修改配置文件修改配置負載均衡&#xff08;可選&#xff09;重啟 總結 前言 使用Unity開了個后臺服務器&#xff0c;但是另一個Java服務器進行大量異步請求時會導致服務器回復過慢&#xff0c;所以開一個Apache緩沖一…
閱讀更多...
最新文章

Copyright @ 2022~2023