HarmonyOS NEXT 开发实战：深度解析 ArkUI visibility 显隐切换布局

本文基于 HarmonyOS NEXT（API 12），深入剖析 ArkUI 中 visibility 属性的核心原理、三种状态的区别、与 if/else 条件渲染的性能对比，以及在实际项目中的最佳实践。

项目演示

第一章：引言 —— 从一个简单问题说起

在移动应用开发中，控制组件的显示与隐藏是再寻常不过的需求了。无论是展开/收起一个设置面板、切换不同的 Tab 内容、还是根据用户权限显示不同的操作按钮，我们几乎每天都在面对这个问题。

但你是否想过：当一个组件从屏幕上"消失"时，它到底发生了什么？

在传统的声明式 UI 框架中，通常有两种方式实现显隐切换：

方式一：条件渲染

if (isVisible) {
Component()
}

方式二：显隐属性

Component()
.visibility(Visibility.Visible)

这两种方式看似殊途同归，但其背后的实现机制、性能表现和适用场景却有着天壤之别。在 HarmonyOS NEXT 的 ArkUI 框架中，visibility 属性为我们提供了一种轻量级、高性能的显隐控制方案，特别适合需要频繁切换的场景。

本文将带你从零开始，全面掌握 visibility 的使用技巧。无论你是刚接触 HarmonyOS 的新手，还是已经有一定开发经验的工程师，都能在本文中找到有价值的内容。

你将学到什么

• ArkUI 渲染引擎的核心工作原理，理解组件"显隐"背后的本质
• visibility 属性三种状态（Visible、Hidden、None）的精确差异
• visibility 与 if/else 条件渲染的深度性能对比
• 组件状态保持机制，以及为什么 visibility 能保留状态而 if/else 不能
• 多种真实开发场景的完整代码示例
• 常见陷阱与调试技巧
• 性能优化的黄金法则

前置知识

本文假设你已经具备以下基础知识：

• 了解 HarmonyOS 应用开发的基本流程
• 熟悉 ArkTS 语法（TypeScript 的子集）
• 掌握 ArkUI 的基本组件（Column、Row、Text、Button 等）
• 理解 @Entry、@Component、@State 等装饰器的作用

如果你对以上内容还不太熟悉，建议先阅读 HarmonyOS NEXT 官方文档中的快速入门章节。

第二章：ArkUI 渲染基础 —— 理解组件的"生与死"

要真正理解 visibility 的价值，我们需要先搞清楚 ArkUI 框架是如何管理组件的渲染和生命周期的。

2.1 渲染树的概念

ArkUI 采用声明式 UI 范式，开发者描述的是"界面应该是什么样子"，而不是"如何一步步构建界面"。框架内部会维护一棵 渲染树（Render Tree），每个 UI 组件都是这棵树的节点。

Render Tree
├── Page (根节点)
│ ├── Column
│ │ ├── Text (标题)
│ │ ├── Button (按钮1)
│ │ ├── Button (按钮2)
│ │ └── Column (面板)
│ │ ├── Text (内容)
│ │ └── TextInput (输入框)
│ └── …

当我们修改组件的属性（比如文字颜色、背景色），框架会自动计算需要重新绘制的部分，并高效地更新屏幕。这个过程被称为 Diff 算法。

2.2 组件的三种"状态"

在渲染树中，一个组件节点可以处于三种不同的状态：

1. 存在且可见（Existent & Visible）

• 组件节点存在于渲染树中
• 参与布局计算
• 参与绘制流程
• 用户可以看到并交互

2. 存在但不可见（Existent & Invisible）

• 组件节点存在于渲染树中
• 参与布局计算（占据空间）
• 不参与绘制流程（不显示）
• 用户看不到，但仍可能拦截触摸事件

3. 不存在（Non-existent）

• 组件节点不存在于渲染树中
• 不参与布局计算
• 不参与绘制流程
• 组件的所有内存资源都被释放

这三种状态恰好对应 visibility 属性的三种取值，以及 if/else 条件渲染的效果。

2.3 条件渲染的代价

让我们看看当你使用 if/else 控制组件时，框架内部发生了什么：

@State showPanel: boolean = true

build() {
Column() {
if (this.showPanel) {
PanelComponent()
}
}
}

当 showPanel 从 true 变为 false 时：

当 showPanel 从 false 变为 true 时：

关键问题：每次切换都需要完整的"销毁-创建"流程。如果组件内部有复杂的状态（比如滚动位置、输入内容、动画进度），这些状态都会被重置。

2.4 visibility 的魔法

而使用 visibility 属性时，情况完全不同：

@State panelVisibility: Visibility = Visibility.Visible

build() {
Column() {
PanelComponent()
.visibility(this.panelVisibility)
}
}

当 panelVisibility 从 Visible 变为 None 时：

当 panelVisibility 从 None 变回 Visible 时：

这就是为什么 visibility 能保留状态的根本原因：组件实例从未被销毁过！

第三章：visibility API 深度解析

现在我们已经理解了底层原理，让我们正式进入 visibility 属性的学习。

3.1 基本语法

visibility 是 ArkUI 通用属性之一，可以应用于几乎所有组件：

Component()
.visibility(value: Visibility)

参数 value 是 Visibility 枚举类型，包含三个值：

enum Visibility {
Visible = 0, // 可见
Hidden = 1, // 隐藏但保留空间
None = 2 // 隐藏且不保留空间
}

3.2 Visibility.Visible —— 正常显示

Text('Hello World')
.visibility(Visibility.Visible)

这是默认值，组件正常显示，参与布局和绘制。如果不显式设置 visibility，组件就是这个状态。

3.3 Visibility.Hidden —— 隐形占位

Column() {
Text('我会显示')
Text('我会被隐藏但仍占空间')
.visibility(Visibility.Hidden)
Text('我会显示')
}

效果描述：

• 组件不可见，用户看不到
• 组件仍然占据布局空间
• 组件仍然存在于渲染树中
• 组件的状态被保留
• 组件不会响应触摸事件

视觉表现：就像组件变成了"透明"的，但周围的布局不会因为它的消失而重新排列。

3.4 Visibility.None —— 彻底移除

Column() {
Text('我会显示')
Text('我会被完全移除')
.visibility(Visibility.None)
Text('我会显示')
}

效果描述：

• 组件不可见，用户看不到
• 组件不占据布局空间（布局会重新计算）
• 组件仍然存在于渲染树中（这点与 if/else 不同）
• 组件的状态被保留
• 组件不会响应触摸事件

视觉表现：就像组件被"删除"了，周围的布局会填补它留下的空缺。

3.5 Hidden vs None —— 布局影响对比

让我们通过一个更直观的例子来看两者的区别：

@State hiddenMode: boolean = false

build() {
Column({ space: 10 }) {
Button(this.hiddenMode ? '切换到 None 模式' : '切换到 Hidden 模式')
.onClick(() => {
this.hiddenMode = !this.hiddenMode
})

Row() {
Text('左侧')
.layoutWeight(1)
.height(60)
.backgroundColor('#E3F2FD')
.textAlign(TextAlign.Center)

Text('中间（可隐藏）')
.layoutWeight(1)
.height(60)
.backgroundColor('#FFF3E0')
.textAlign(TextAlign.Center)
.visibility(this.hiddenMode ? Visibility.Hidden : Visibility.None)

Text('右侧')
.layoutWeight(1)
.height(60)
.backgroundColor('#E8F5E9')
.textAlign(TextAlign.Center)
}
.width('100%')
}
}

当模式为 Hidden 时：

• "中间"组件虽然看不见，但仍占据 1/3 的空间
• 布局保持三栏结构不变

当模式为 None 时：

• "中间"组件完全消失
• "左侧"和"右侧"组件会平分整个宽度
• 布局从三栏变为两栏

3.6 动态绑定 visibility

在实际开发中，我们通常会将 visibility 绑定到状态变量：

@State showContent: boolean = true

build() {
Column() {
Button(this.showContent ? '隐藏内容' : '显示内容')
.onClick(() => {
this.showContent = !this.showContent
})

Text('这是可以隐藏的内容')
.visibility(this.showContent ? Visibility.Visible : Visibility.None)
}
}

也可以使用枚举来管理更复杂的显隐逻辑：

enum PanelState {
EXPANDED, // 展开状态
COLLAPSED, // 折叠但占位
HIDDEN // 完全隐藏
}

@State panelState: PanelState = PanelState.EXPANDED

build() {
Column() {
PanelContent()
.visibility(
this.panelState === PanelState.EXPANDED ? Visibility.Visible :
this.panelState === PanelState.COLLAPSED ? Visibility.Hidden :
Visibility.None
)
}
}

第四章：visibility vs if/else —— 深度对比分析

这是本文最核心的章节。理解 visibility 和 if/else 的本质区别，是写出高性能 HarmonyOS 应用的关键。

4.1 对比维度总览

4.2 状态保持机制详解

让我们通过一个实验来直观感受两者的状态保持差异。

visibility 方式：

@State isVisible: boolean = true
@State counterValue: number = 0

build() {
Column() {
Button(this.isVisible ? '隐藏面板' : '显示面板')
.onClick(() => {
this.isVisible = !this.isVisible
})

// visibility 面板 – 组件始终存在
Column() {
Text('Visibility 面板')
.fontSize(18)
.fontWeight(FontWeight.Bold)

Text(`计数器: ${this.counterValue}`)
.fontSize(16)
.margin({ top: 10 })

Button('+1')
.onClick(() => {
this.counterValue++
})
.margin({ top: 10 })
}
.padding(20)
.backgroundColor('#E3F2FD')
.borderRadius(10)
.visibility(this.isVisible ? Visibility.Visible : Visibility.None)
}
}

对比 if/else 方式：

@State showWithIfElse: boolean = true
@State counterB: number = 0

build() {
Column() {
Button(this.showWithIfElse ? '隐藏面板' : '显示面板')
.onClick(() => {
this.showWithIfElse = !this.showWithIfElse
})

// if/else 面板 – 条件为 false 时组件被销毁
if (this.showWithIfElse) {
Column() {
Text('if/else 面板')
.fontSize(18)
.fontWeight(FontWeight.Bold)

Text(`计数器: ${this.counterB}`)
.fontSize(16)
.margin({ top: 10 })

Button('+1')
.onClick(() => {
this.counterB++
})
.margin({ top: 10 })
}
.padding(20)
.backgroundColor('#FFEBEE')
.borderRadius(10)
}
}
}

实验步骤：

为什么会这样？

关键在于 counterB 虽然是在外部声明的，但 if/else 块内的 Column 组件在每次条件变为 true 时都会重新创建。而 counterValue 所在的 Column 组件实例从未被销毁，所以状态自然保留。

4.3 性能对比

让我们从性能角度分析两者的差异。

场景：一个包含复杂子组件的面板

假设我们有一个面板组件，内部包含：

• 10 个 Text 组件
• 5 个 Button 组件
• 3 个 Image 组件（从网络加载）
• 1 个 Scroll 组件（包含 20 个子项）

使用 if/else：

• 隐藏时：所有组件被销毁，内存释放
• 显示时：所有组件被重新创建，包括重新加载图片资源
• 耗时：创建过程可能需要几十到几百毫秒
• 如果频繁切换，会造成明显的 UI 卡顿

使用 visibility：

• 隐藏时：组件仅被标记为不可见，内存保持
• 显示时：直接显示，无需创建
• 耗时：几乎为 0（仅改变一个属性）
• 无论切换多频繁，都能保持流畅

4.4 内存占用权衡

visibility 的优势并非没有代价。

visibility 的内存占用：

• 组件始终存在于内存中
• 即使不可见，也会占用内存
• 如果有大量组件同时存在，可能造成内存压力

if/else 的内存占用：

• 仅当组件可见时才占用内存
• 隐藏时内存被释放
• 适合内存敏感的场景

决策建议：

组件是否需要频繁切换？
├── 是 → 使用 visibility
└── 否
├── 组件是否包含复杂状态？
│ ├── 是 → 使用 visibility
│ └── 否
│ ├── 内存是否敏感？
│ │ ├── 是 → 使用 if/else
│ │ └── 否 → 两者皆可，推荐 visibility
│ └── 是否需要保持滚动位置/输入内容？
│ ├── 是 → 使用 visibility
│ └── 否 → 使用 if/else

4.5 实战对比：Tab 切换场景

Tab 切换是 visibility 最典型的应用场景之一。假设我们有三个 Tab：首页、发现、我的。

使用 if/else 实现 Tab

@State currentTab: number = 0

build() {
Column() {
if (this.currentTab === 0) {
HomePage()
} else if (this.currentTab === 1) {
DiscoverPage()
} else {
ProfilePage()
}

Row() {
TabItem('首页', 0, this.currentTab === 0)
TabItem('发现', 1, this.currentTab === 1)
TabItem('我的', 2, this.currentTab === 2)
}
.height(50)
}
}

问题：

• 每次切换 Tab，之前的页面被销毁，新页面被创建
• 用户在首页滚动到第 10 项，切换到发现页再切回来，滚动位置丢失
• 发现页的图片需要重新加载
• 切换时有明显的延迟

使用 visibility 实现 Tab

@State currentTab: number = 0

build() {
Column() {
Stack() {
HomePage()
.visibility(this.currentTab === 0 ? Visibility.Visible : Visibility.Hidden)
DiscoverPage()
.visibility(this.currentTab === 1 ? Visibility.Visible : Visibility.Hidden)
ProfilePage()
.visibility(this.currentTab === 2 ? Visibility.Visible : Visibility.Hidden)
}

Row() {
TabItem('首页', 0, this.currentTab === 0)
TabItem('发现', 1, this.currentTab === 1)
TabItem('我的', 2, this.currentTab === 2)
}
.height(50)
}
}

优势：

• 所有页面始终存在，无需创建/销毁
• 滚动位置、输入内容、选中状态全部保留
• 图片只需加载一次
• 切换瞬间完成，无任何延迟

第五章：完整代码示例 —— 构建可运行的演示应用

理论说得再多，也不如亲手写一个 Demo。让我们构建一个完整的演示应用，展示 visibility 的各种用法。

5.1 项目结构

entry/
├── src/main/
│ ├── ets/
│ │ ├── pages/
│ │ │ └── Index.ets # 主页面
│ │ └── …
│ ├── resources/
│ │ ├── base/
│ │ │ ├── element/
│ │ │ │ └── string.json
│ │ │ └── …
│ │ └── …
│ └── …

5.2 完整的 Index.ets

下面是一个功能完整、注释详尽的演示应用，代码已在 [Index.ets](file:///e:/MyApplication61/entry/src/main/ets/pages/Index.ets) 中实现：

// ============================================================
// 第一部分：visibility 三种状态演示
// ============================================================

enum PanelVisibility {
Visible = 0,
Hidden = 1,
None = 2
}

@State panelVisibility: PanelVisibility = PanelVisibility.Visible
@State visibilityCounter: number = 0
@State visibilityInput: string = ''

build() {
Column() {
Row() {
Button('Visible')
.onClick(() => { this.panelVisibility = PanelVisibility.Visible })
.backgroundColor(this.panelVisibility === PanelVisibility.Visible ? '#007DFF' : '#CCCCCC')
Button('Hidden')
.onClick(() => { this.panelVisibility = PanelVisibility.Hidden })
.backgroundColor(this.panelVisibility === PanelVisibility.Hidden ? '#FF9500' : '#CCCCCC')
Button('None')
.onClick(() => { this.panelVisibility = PanelVisibility.None })
.backgroundColor(this.panelVisibility === PanelVisibility.None ? '#FF3B30' : '#CCCCCC')
}

Column() {
Text(`计数器: ${this.visibilityCounter}`)
Button('+1')
.onClick(() => { this.visibilityCounter++ })
TextInput({ placeholder: '输入文字', text: this.visibilityInput })
.onChange((value: string) => { this.visibilityInput = value })
}
.visibility(
this.panelVisibility === PanelVisibility.Visible ? Visibility.Visible :
this.panelVisibility === PanelVisibility.Hidden ? Visibility.Hidden :
Visibility.None
)
}
}

5.3 运行效果

运行应用后，你可以：

完整的项目代码已在 [Index.ets](file:///e:/MyApplication61/entry/src/main/ets/pages/Index.ets) 中实现，包含了所有演示功能：三种状态切换、与 if/else 对比、Tab 切换、展开/折叠面板等。

第六章：更多实战场景

除了基础的显隐控制，visibility 还有很多高级用法。让我们探索更多真实开发场景。

6.1 加载状态控制

在数据请求时，我们通常需要显示加载指示器：

@State isLoading: boolean = false

build() {
Stack() {
ContentPage()

Column() {
LoadingProgress().width(40).height(40)
Text('加载中…').margin({ top: 12 })
}
.width('100%').height('100%')
.backgroundColor('rgba(0, 0, 0, 0.5)')
.justifyContent(FlexAlign.Center)
.visibility(this.isLoading ? Visibility.Visible : Visibility.None)
}
}

使用 visibility 而非 if/else 的原因：

• 切换更平滑，无闪烁
• 加载动画状态保留
• 代码结构更统一

6.2 动态表单字段

根据用户类型显示不同表单字段：

@State userType: string = 'personal'

build() {
Column() {
Row() {
Button('个人').onClick(() => { this.userType = 'personal' })
Button('企业').onClick(() => { this.userType = 'company' })
}

// 通用字段
TextInput({ placeholder: '姓名', text: '' })

// 个人专属字段
TextInput({ placeholder: '身份证号', text: '' })
.visibility(this.userType === 'personal' ? Visibility.Visible : Visibility.None)

// 企业专属字段
TextInput({ placeholder: '公司名称', text: '' })
.visibility(this.userType === 'company' ? Visibility.Visible : Visibility.None)

Button('提交')
}
}

使用 visibility 的好处：用户切换类型后再切回来，之前输入的内容仍然保留。

6.3 权限引导弹层

对于不常用的弹层，应该使用 if/else：

@State showPermissionGuide: boolean = false

build() {
Stack() {
MainPage()

if (this.showPermissionGuide) {
Column() {
Text('需要位置权限')
Text('请在设置中开启位置权限')
Button('去设置').onClick(() => { this.goToSettings() })
}
.backgroundColor('rgba(0, 0, 0, 0.6)')
}
}
}

这里用 if/else，因为弹层不常用，大部分时间不需要存在于内存中。

6.4 可展开列表项

在列表中实现展开/收起效果：

@State expandedId: number = –1

build() {
List() {
ForEach(this.items, (item: ListItem) => {
ListItem() {
Column() {
Row() {
Text(item.title)
Blank()
Text(this.expandedId === item.id ? '收起' : '展开')
}

Column() {
Text(item.description)
Button('查看详情')
}
.visibility(this.expandedId === item.id ? Visibility.Visible : Visibility.None)
}
}
}, (item: ListItem) => item.id.toString())
}
}

6.5 多步骤表单引导

对于步骤较多的引导流程：

@State currentStep: number = 1
const TOTAL_STEPS = 4

build() {
Column() {
// 步骤指示器
Row() {
ForEach([1, 2, 3, 4], (step: number) => {
Circle()
.width(24).height(24)
.fill(this.currentStep >= step ? '#007DFF' : '#EEEEEE')
}, (step: number) => step.toString())
}

// 步骤内容 – 全部预加载，用 visibility 切换
Column().visibility(this.currentStep === 1 ? Visibility.Visible : Visibility.None)
Column().visibility(this.currentStep === 2 ? Visibility.Visible : Visibility.None)
Column().visibility(this.currentStep === 3 ? Visibility.Visible : Visibility.None)
Column().visibility(this.currentStep === 4 ? Visibility.Visible : Visibility.None)

// 上一步/下一步按钮
Row() {
Button('上一步')
.visibility(this.currentStep > 1 ? Visibility.Visible : Visibility.None)
.onClick(() => { this.currentStep— })
Blank()
Button(this.currentStep < TOTAL_STEPS ? '下一步' : '完成')
.onClick(() => { this.currentStep++ })
}
}
}

使用 visibility 实现步骤切换的好处：

• 每一步的输入内容都保留
• 切换瞬间完成
• 用户可以快速在步骤间跳转

第七章：性能优化指南

visibility 是强大的工具，但使用不当也可能带来问题。让我们总结最佳实践。

7.1 何时使用 visibility

推荐使用 visibility：

7.2 何时使用 if/else

推荐使用 if/else：

7.3 Hidden vs None 选择

使用 Hidden：

• 需要保持布局稳定
• 配合 Stack 叠层布局

使用 None：

• 不需要保留布局空间
• 配合 Scroll、List 等滚动容器

7.4 常见陷阱

陷阱 1：大量组件同时使用 visibility

// ❌ 100 个组件同时存在内存中
ForEach(items, (item: Item) => {
ItemComponent(item)
.visibility(item.visible ? Visibility.Visible : Visibility.None)
})

解决：使用懒加载或虚拟列表。

陷阱 2：visibility 与动画冲突

// ❌ visibility 不会触发动画
Column()
.opacity(this.show ? 1 : 0)
.visibility(this.show ? Visibility.Visible : Visibility.None)
.animateTo({ duration: 300 })

visibility 变化是即时的。如果需要动画，用 opacity 控制透明度：

// ✅ 用 opacity 实现淡入淡出
Column()
.opacity(this.show ? 1 : 0)
.animateTo({ duration: 300 })

陷阱 3：忽略布局影响

// ❌ None 导致布局跳动
Column() {
Header().visibility(show ? Visibility.Visible : Visibility.None)
Content()
}

解决：用 Hidden 保持布局稳定：

// ✅ Hidden 保持布局
Column() {
Header().visibility(show ? Visibility.Visible : Visibility.Hidden)
Content()
}

7.5 性能检测方法

1. 使用 DevEco Studio 性能分析器

• CPU 分析：检测组件创建/销毁耗时
• 内存分析：监控内存变化
• 帧率监控：检测 UI 卡顿

2. 添加生命周期日志

@Component
struct MyComponent {
aboutToAppear() {
console.info('MyComponent: created')
}

aboutToDisappear() {
console.info('MyComponent: destroyed')
}

build() {
// …
}
}

3. 帧率监控

@State frameCount: number = 0

aboutToAppear() {
setInterval(() => {
console.info(`FPS: ${this.frameCount}`)
this.frameCount = 0
}, 1000)
}

第八章：常见问题与调试技巧

8.1 Q&A 精选

Q1：visibility 设为 None 后还能响应触摸事件吗？

A：不能。Hidden 和 None 都不响应触摸。但 Hidden 可能遮挡下方组件的触摸。

Q2：visibility 和 opacity 有什么区别？

A：

• visibility：控制是否参与渲染
• opacity：控制透明度

opacity 为 0 时仍响应触摸，visibility 为 None 时不参与布局。

Q3：可以同时设置 visibility 和 opacity 吗？

A：可以，但 visibility 不是 Visible 时 opacity 无效。

Q4：父组件隐藏了，子组件还能显示吗？

A：不能。visibility 是继承的，父组件隐藏则子组件也隐藏。

8.2 调试技巧

技巧 1：用背景色标记

Column()
.backgroundColor('#FF0000') // 红色背景
.visibility(this.show ? Visibility.Visible : Visibility.Hidden)

技巧 2：查看组件树

DevEco Studio 的 Inspector 可以查看：

• 组件节点是否存在
• 组件的实际属性值
• 布局结构

技巧 3：实时状态显示

Text(`状态: ${this.show ? '显示' : '隐藏'}`)
.backgroundColor('#FFFF00')

8.3 常见报错

报错：Property ‘visibility’ does not exist

解决：用通用容器包裹组件：

// ✅
Column() {
SpecialComponent()
}.visibility(Visibility.None)

报错：Type ‘number’ is not assignable to type ‘Visibility’

解决：用枚举值而不是数字：

// ✅
.visibility(Visibility.None)

报错：visibility 变化后布局未更新

解决：检查是否使用了 Hidden 而非 None，或刷新组件：

@State refreshKey: number = 0
this.refreshKey++

Column()
.visibility(this.show ? Visibility.Visible : Visibility.None)
.id(`component-${this.refreshKey}`)

第九章：总结与展望

9.1 核心要点回顾

本文深入探讨了 HarmonyOS NEXT 中 visibility 属性的各个方面，让我们总结一下核心要点：

9.2 最佳实践清单

✅ 应该做的：

• 用 visibility 控制 Tab 切换、展开/折叠面板
• 用 Hidden 保持布局稳定
• 预加载核心组件以提升用户体验
• 在状态需要保留时使用 visibility

❌ 不应该做的：

• 在大量同时显示的组件上使用 visibility
• 忽略 Hidden 和 None 的布局差异
• 用 visibility 代替不常用的一次性弹层
• 将 visibility 与 opacity 动画混用

9.3 未来展望

随着 HarmonyOS 的不断演进，visibility 可能会迎来更多增强功能：

• 支持更多过渡动画
• 与组件复用机制深度结合
• 支持条件懒加载

作为开发者，我们应该持续关注 HarmonyOS NEXT 的更新，学习新的 API 和最佳实践，不断提升自己的开发能力。

9.4 延伸学习资源

• HarmonyOS NEXT 官方文档
• ArkUI 组件参考
• ArkTS 语言参考