一、前言：应用架构的第一性原理做鸿蒙应用开发，最容易被忽视但也最重要的事情是：先把应用外壳（AppShell）搭对。很多开发者上来就写业务页面，结果发现：标题栏风格不统一，有的手写、有的用系统页面返回逻辑混乱，Router 和 Navigation 混用Tab 切换和页面跳转的边界模糊底部导航栏和内容滚动相互影响本文将以ArkUILab项目的三个核心实验为线索，从零讲解如何构建一个接近官方体验的鸿蒙应用外壳。我们将覆盖三个关键能力：Navigation AppShell（E001）：页面层级、动态模糊标题栏、生命周期Floating TabBar（E003）：悬浮底栏、MiniBar、Tab 内独立导航栈Page Transition（E002）：页面转场体验、共享元素的探索与局限二、Navigation 应用外壳2.1 Navigation 在 HarmonyOS 设计体系中的位置在深入代码之前，先理解 Navigation 在鸿蒙 UI Design Kit 中的定位非常重要。它不是一个"能跳转页面的组件"，而是一个把页面层级、标题栏、内容区和系统化外壳绑在一起的结构入口。在 ArkUI 的能力体系中，Navigation 的合理边界是：Navigation owns: 页面层级 / 标题栏 / 内容区 / 页面级命令 / 返回模型 does NOT own: 工作区树 / Tab 语义 / 编辑器块 / 对象操作 / 数据模型官方设计体系中的能力分工：能力职责与 Navigation 的关系Navigation页面层级与返回路径上游结构，定义"当前在哪"Sidebar主导航树和长期结构内容区的承载者之一Tabs同层内容切换应依附在 Navigation 确定的层级内ActionBar命令集合不同于页面级菜单，是操作集Search全局/局部搜索可放入标题栏扩展区，但能力独立2.2 为什么用 HdsNavigation 而不是普通 Navigation？普通Navigation组件是 ArkUI 的基础导航容器，但HdsNavigation（来自@kit.UIDesignKit）提供了官方级的额外能力：内置动态模糊标题栏标题栏与滚动内容绑定标题栏菜单样式沉浸式渐变模糊系统级返回按钮样式// 错误写法 ❌ Navigation(this.pathStack) { // ... } ​ // 正确写法 ✅ HdsNavigation(this.pathStack) { // ... }HDS Kit 位于 DevEco SDK 的default/hms下，通过@kit.UIDesignKit导入，不需要在entry/oh-package.json5中追加 ohpm 依赖。2.3 最小可用 Navigation AppShell一个完整的 Navigation AppShell 结构：Index → NavigationAppShell → HdsNavigation(pathStack) → Home Scroll(homeScroller) → 固定高度 Header (136vp) → 可滚动内容 → navDestination(name) → HdsNavDestination → Detail Scroll(detailScroller) → titleBar (动态模糊) → bindToScrollable(detailScroller)核心原则：Shell 拥有 NavigationStack：NavPathStack定义在 Shell 组件中Page 拥有自己的 Scroll：Root 和 Detail 各自独立的ScrollerTitleBar 由 HDS 拥有：不手写标题栏和返回按钮返回由 HDS/Navigation 拥有：不自己处理返回逻辑内容只负责提供可滚动、可采样的页面材质2.4 动态模糊标题栏这是官方设置、文件、图库、备忘录等应用的标志性体验——标题栏不是固定的实色工具条，而是随内容滚动从透明渐变到模糊：HdsNavigation(this.pathStack) { // 内容 } .titleMode(HdsNavigationTitleMode.MINI) .titleBar({ style: { scrollEffectOpts: { scrollEffectType: ScrollEffectType.IMMERSIVE_GRADIENT_BLUR, originalStyle: { // 初始态：透明背景 backgroundColor: '#00FFFFFF', contentStyle: { menuStyle: { backgroundColor: '#FFFFFFCC', textColor: '#182431', iconColor: '#182431' } } }, scrollEffectStyle: { // 滚动后：半透明白底 + 模糊 backgroundColor: '#CCFFFFFF', blurRadius: 18,