鸿蒙开发实战：详解 ArkUI 导航机制——从 Tabs 到 Navigation

在鸿蒙应用开发中，页面导航是构建应用骨架的关键。无论是底部菜单的切换，还是页面层级的跳转，ArkUI 主要为我们提供了两种核心的导航方式：Tabs（页签容器） 和 Navigation（路由导航）。

本文将深入探讨这两种组件的实战用法，从基础的 UI 构建到性能优化，再到系统级路由表的配置，助你掌握鸿蒙应用的页面管理。

一、 Tabs：构建平行视界的页签容器

Tabs 组件主要用于同一页面内不同内容的切换，它类似于传统的“轮播图”或“底部导航栏”模式。用户可以通过点击页签（TabBar）在不同的内容容器（TabContent）之间进行切换。

1.1 基础用法

最简单的 Tabs 形态类似于轮播图。我们只需要在 Tabs 中包裹多个 TabContent 即可。

Column() {  Tabs() {    TabContent() {      Text('1').fontSize(150)    }    TabContent() {      Text('2').fontSize(150)    }  }}

1.2 进阶：底部导航栏与自定义样式

在移动端应用中，我们更常将其作为底部的 TabBar 使用。这需要配置 barPosition 属性为 BarPosition.End，并为每个 TabContent 设置 .tabBar 属性。

为了满足 UI 设计需求，系统默认的 Tab 样式往往不够用，这时我们可以利用 @Builder 装饰器来自定义构建 TabBar 的外观。

@Entry@Componentstruct TabsExample {// 自定义 TabBar 构建函数@Builder  tabBuilder(text: string, fontSize: number) {    Column() {      Text(text).fontSize(fontSize)    }  }  build() {    Row() {      Column() {// 设置导航栏位于底部        Tabs({ barPosition: BarPosition.End }) {          TabContent() {            Text('1').fontSize(150)          }          .tabBar(this.tabBuilder('首页', 20)) // 使用自定义 Builder          TabContent() {            Text('2').fontSize(150)          }          .tabBar(this.tabBuilder('我的', 20))        }      }      .width('100%')    }    .height('100%')  }}

1.3 关键点：Tabs 的性能优化

在开发复杂应用时，性能是必须考虑的因素。Tabs 组件默认情况下会一次性渲染所有的 TabContent。如果每个页签内的内容非常复杂，这会造成巨大的内存压力和首屏加载延迟。

ArkUI 提供了 cachedMaxCount 属性来解决这个问题，它允许我们限制预加载和缓存的页面数量。此外，还可以通过 barMode 配合不同的缓存策略来优化体验：

• 限制缓存数量：设置 cachedMaxCount(n)，仅保留必要的页面缓存。
• 缓存策略：
• CACHE_BOTH_SIDE：缓存当前页及其左右两侧的页面（适用于左右滑动的场景）。
• CACHE_LATEST_SWITCHED：缓存当前页和最近一次切换过的页面。

二、 Navigation：新一代的路由组件

对于页面之间的层级跳转（如从列表页进入详情页），ArkTS 推荐使用 Navigation 组件。它是鸿蒙应用中的“路由担当”，相比老旧的 router 接口，Navigation 支持更灵活的组件级路由和分栏显示。

2.1 基础概念与模式

Navigation 组件支持两种显示模式，通过 .mode() 属性设置：

• NavigationMode.Stack（单页模式）：适用于手机，页面层叠压入，类似栈结构。
• NavigationMode.Split（分栏模式）：适用于折叠屏或平板，左侧导航，右侧内容。

2.2 Navigation 的“三驾马车”

要让 Navigation 正常工作，必须集齐以下三个要素：

1. Navigation 组件：路由的根容器，必须包裹触发路由跳转的 UI。
2. NavPathStack 类：路由的大脑，负责管理页面栈（Push, Pop, Clear 等操作）。
3. NavDestination 组件：子页面的载体，所有跳转的目标页面内容必须用它包裹。

2.3 实战代码：构建一个路由系统

以下演示如何结合 NavPathStack 实现参数传递与页面跳转：

第一步：定义子页面 (Page)

子页面必须使用 NavDestination 作为根节点。注意这里使用了 @Consume 来接收父组件提供的路由栈对象，以便实现“返回”功能。