[Android 从零到一] Navigation Component:让页面跳转更清晰

简介: Navigation Component 是 Jetpack 提供的导航管理方案,通过集中定义导航图(NavGraph),统一由 NavController 执行跳转,自动处理返回栈、参数传递、深链接、Toolbar/BottomNav 集成等。告别散落各处的 Intent 和 FragmentTransaction,让页面流转更清晰、安全、易维护。

在 Android 项目里,页面跳转一开始通常很简单:从 A 页面打开 B 页面,写一个 Intent;Fragment 之间切换,就在 FragmentTransactionreplace 一下。项目小的时候这样没问题,但随着页面数量变多,跳转关系、返回栈、参数传递、深链接都会慢慢变复杂。

Navigation Component 就是 Jetpack 提供的一套导航管理方案。它不是为了替代 Activity 或 Fragment,而是把“页面之间怎么走”这件事集中管理起来,让页面跳转更清楚,也更容易维护。

1. 为什么需要 Navigation Component

先看传统写法里常见的几个问题。

比如 Fragment 跳转:

supportFragmentManager.beginTransaction()
    .replace(R.id.container, DetailFragment())
    .addToBackStack(null)
    .commit()

这段代码能跑,但问题也明显:

  • 跳转逻辑散落在不同页面里
  • 返回栈需要自己管理
  • 页面参数通常靠 Bundle 手动传递
  • 页面关系不直观,维护成本会变高
  • 深链接、底部导航、多返回栈场景容易写乱

Navigation Component 的核心思路是:把导航关系抽出来,放到一个导航图里,由 NavController 统一执行跳转。

也就是说,页面只关心“我要去哪里”,具体怎么管理返回栈、怎么找到目标页面、怎么传参数,则交给导航组件处理。

2. Navigation Component 的三个核心角色

Navigation Component 里最常见的三个概念是:

  • NavHost:页面容器,用来承载不同目的地
  • NavController:导航控制器,负责执行跳转和返回
  • NavGraph:导航图,描述页面之间的关系

可以简单理解成:

NavGraph 负责定义路线
NavHost 负责显示页面
NavController 负责执行跳转

这三个角色分清之后,Navigation Component 就不难理解了。

3. 添加依赖

在模块的 build.gradle 中添加依赖:

dependencies {
    implementation("androidx.navigation:navigation-fragment-ktx:2.7.7")
    implementation("androidx.navigation:navigation-ui-ktx:2.7.7")
}

如果项目使用的是版本目录,也可以把版本统一放到 libs.versions.toml 中管理。实际项目里建议用统一版本管理,避免多个 Jetpack 组件版本混乱。

4. 创建导航图

res/navigation 目录下创建一个导航图,比如 nav_graph.xml

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/nav_graph"
    app:startDestination="@id/homeFragment">

    <fragment
        android:id="@+id/homeFragment"
        android:name="com.example.app.HomeFragment"
        android:label="首页">
        <action
            android:id="@+id/action_home_to_detail"
            app:destination="@id/detailFragment" />
    </fragment>

    <fragment
        android:id="@+id/detailFragment"
        android:name="com.example.app.DetailFragment"
        android:label="详情页" />
</navigation>

这里定义了两个页面:homeFragmentdetailFragment

app:startDestination 表示进入导航容器后默认显示哪个页面。action_home_to_detail 表示从首页跳转到详情页的一条路径。

5. 在布局中放入 NavHost

Activity 的布局中需要放一个 FragmentContainerView,作为导航页面的容器:

<androidx.fragment.app.FragmentContainerView
    android:id="@+id/nav_host_fragment"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:defaultNavHost="true"
    app:navGraph="@navigation/nav_graph" />

几个属性需要注意:

  • android:name 指定这里使用的是 NavHostFragment
  • app:navGraph 绑定刚才创建的导航图
  • app:defaultNavHost="true" 表示系统返回键优先交给这个导航容器处理

这样,一个基础的导航容器就准备好了。

6. 执行页面跳转

在 Fragment 中可以通过 findNavController() 获取导航控制器:

class HomeFragment : Fragment(R.layout.fragment_home) {

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        view.findViewById<Button>(R.id.btnOpenDetail).setOnClickListener {
            findNavController().navigate(R.id.action_home_to_detail)
        }
    }
}

相比手写 FragmentTransaction,这段代码表达更清楚:点击按钮后,按照导航图里定义的 action 跳转到详情页。

页面之间的关系不再散落在各个 Fragment 里,而是可以从 nav_graph.xml 里整体查看。

7. 页面返回怎么处理

Navigation Component 会自动维护返回栈。

如果从首页进入详情页,按系统返回键,默认会回到首页。如果你想在代码里主动返回,可以这样写:

findNavController().popBackStack()

如果想返回到指定页面,也可以使用:

findNavController().popBackStack(R.id.homeFragment, false)

第二个参数表示目标页面本身是否也要一起弹出。

  • false:返回到目标页面,目标页面保留
  • true:连目标页面一起弹出

这个参数在实际开发里很容易写错,需要特别注意。

8. 页面参数传递

最基础的方式是用 Bundle

val bundle = bundleOf("articleId" to 1001)
findNavController().navigate(R.id.action_home_to_detail, bundle)

在目标页面读取:

val articleId = requireArguments().getInt("articleId")

这种方式简单直接,但缺点是 key 是字符串,类型也需要自己保证。如果项目比较大,更推荐使用 Safe Args。

9. 使用 Safe Args 提升安全性

Safe Args 是 Navigation Component 提供的参数安全插件。它会根据导航图生成类型安全的跳转代码。

添加插件后,可以在导航图里定义参数:

<fragment
    android:id="@+id/detailFragment"
    android:name="com.example.app.DetailFragment"
    android:label="详情页">

    <argument
        android:name="articleId"
        app:argType="integer" />
</fragment>

跳转时就可以写成:

val action = HomeFragmentDirections.actionHomeToDetail(articleId = 1001)
findNavController().navigate(action)

详情页读取参数:

val args: DetailFragmentArgs by navArgs()
val articleId = args.articleId

这样做的好处是:

  • 参数名不容易写错
  • 参数类型由编译器检查
  • 重构时更安全
  • 页面跳转代码更清晰

10. 和 Toolbar 配合

Navigation Component 也可以和 Toolbar 配合,自动处理标题和返回按钮。

val navHostFragment = supportFragmentManager
    .findFragmentById(R.id.nav_host_fragment) as NavHostFragment
val navController = navHostFragment.navController

setupActionBarWithNavController(navController)

然后重写:

override fun onSupportNavigateUp(): Boolean {
    return findNavController(R.id.nav_host_fragment).navigateUp()
            || super.onSupportNavigateUp()
}

这样在进入二级页面时,顶部返回按钮就能自动跟随导航栈工作。

如果项目使用 Toolbar 而不是默认 ActionBar,可以使用:

toolbar.setupWithNavController(navController)

11. 和 BottomNavigationView 配合

底部导航也是 Navigation Component 常见使用场景。

bottomNavigationView.setupWithNavController(navController)

只要 BottomNavigationView 中 menu item 的 id 和导航图里的 destination id 对应,组件就可以自动完成切换。

例如:

<item
    android:id="@id/homeFragment"
    android:title="首页"
    android:icon="@drawable/ic_home" />

这里的 android:id 要和导航图中的 homeFragment 保持一致。

这个约定很重要。如果 id 对不上,点击底部导航时就找不到对应页面。

12. 深链接支持

Navigation Component 支持直接在导航图里配置 deep link:

<fragment
    android:id="@+id/detailFragment"
    android:name="com.example.app.DetailFragment">

    <deepLink app:uri="https://example.com/article/{articleId}" />
</fragment>

当外部链接匹配这个规则时,可以直接打开详情页,并把路径里的参数传进来。

深链接适合这些场景:

  • 推送通知点击后进入指定页面
  • 浏览器链接打开 App 内页面
  • 分享链接回流到 App
  • 活动页、内容页直接唤起

不过深链接也要注意校验参数,不要默认相信外部传进来的值。

13. 常见坑

13.1 在错误的 Fragment 上找 NavController

如果页面结构比较复杂,比如 Fragment 里又嵌套 Fragment,可能会拿错 NavController

常见解决方式是从正确的 View 或宿主 Fragment 获取:

view.findNavController()

或者在 Activity 中通过 NavHostFragment 获取。

13.2 重复点击导致多次跳转

按钮快速点击时,可能连续执行多次 navigate(),导致重复打开页面。实际项目里可以做点击防抖,或者在跳转前检查当前 destination:

val navController = findNavController()
if (navController.currentDestination?.id == R.id.homeFragment) {
    navController.navigate(R.id.action_home_to_detail)
}

13.3 返回栈和预期不一致

如果登录页、首页、支付成功页这类页面涉及清空历史栈,就要认真配置 popUpTo

例如登录成功后进入首页,并清掉登录页:

<action
    android:id="@+id/action_login_to_home"
    app:destination="@id/homeFragment"
    app:popUpTo="@id/loginFragment"
    app:popUpToInclusive="true" />

popUpToInclusive="true" 表示把 loginFragment 自己也从返回栈中移除。这样用户在首页按返回键时,就不会回到登录页。

13.4 把导航图写得过大

导航图不是越大越好。大型项目里,如果所有页面都塞进一个导航图,维护起来也会变乱。

更合理的做法是按业务模块拆分,比如:

  • 首页模块导航图
  • 登录模块导航图
  • 订单模块导航图
  • 我的页面导航图

这样每个导航图只负责一个相对独立的业务范围。

14. 什么时候适合用 Navigation Component

适合使用的场景:

  • Fragment 页面较多
  • 页面跳转关系复杂
  • 有底部导航、抽屉导航、深链接
  • 希望统一管理返回栈
  • 希望减少手写 FragmentTransaction

不一定需要使用的场景:

  • 项目很小,只有一两个页面
  • 页面完全由 Compose Navigation 管理
  • 团队已有成熟的自研路由方案
  • 业务强依赖跨模块动态路由

所以 Navigation Component 不是所有项目的唯一答案,但它很适合大多数 Jetpack 风格的中小型 Android 项目。

15. 小结

Navigation Component 解决的不是“能不能跳转”的问题,而是“页面跳转能不能清晰、统一、可维护”的问题。

它把页面关系集中到导航图里,用 NavController 统一执行跳转,并且内置了返回栈、参数传递、Toolbar、BottomNavigationView、Deep Link 等能力。

掌握它之后,Android 页面导航会从零散的手写事务,变成更结构化的页面流转管理。

对于刚开始学习 Jetpack 的开发者来说,可以先记住一句话:

Activity 提供宿主,Fragment 承载页面,Navigation Component 管理页面之间怎么走。

理解了这一点,再去看导航图、NavHost、NavController,就会顺很多。

相关文章
|
2月前
|
API Android开发 开发者
Notification 通知:从基础到渠道适配
本文详解Android通知从基础到渠道适配的完整实践:涵盖NotificationChannel创建规范、NotificationCompat.Builder兼容构建、PendingIntent跳转、大文本/进度条/分组等常用样式,并总结SmallIcon要求、ID管理、FLAG_IMMUTABLE适配等关键避坑点,助你打造用户友好、系统兼容的通知体验
429 1
|
2月前
|
定位技术 Android开发 Kotlin
Service 与前台服务:让任务在后台持续运行
Android Service 是无UI后台组件,专用于长期任务。自8.0起,需用前台服务(带常驻通知)保障运行;核心要点:5秒内调`startForeground`、耗时操作移出主线程、任务完成及时`stopSelf`。
194 0
|
2月前
|
Java API 调度
WorkManager:可靠的后台任务调度
WorkManager 是 Jetpack 提供的可靠后台任务调度方案,自动适配不同 Android 版本(JobScheduler/AlarmManager),支持约束条件、重试、持久化与设备重启恢复。适用于日志上传、数据同步等“必须完成但无需实时”的任务,兼顾简洁性与健壮性
158 0
|
2月前
|
人工智能 自然语言处理 监控
开源 APM 详细功能对比:SkyWalking vs Databuff
本文对比 SkyWalking 与 Databuff 在服务监控、链路追踪、拓扑、告警及 AI 问数五大核心场景的实操差异,基于双 Demo 真实界面截图与功能表,突出 Databuff 的 OTLP 原生接入、服务关系首屏、瀑布图着色、中文告警直读及自然语言智能问数等优势,助力团队面向 OTel 统一与智能化运维选型。(239字)
272 3
开源 APM 详细功能对比:SkyWalking vs Databuff
|
2月前
|
人工智能 自然语言处理 数据可视化
短剧 / 广告量产神器!万镜一刻 yikeai 搭载 HappyHorse1.1,故事板 + 无限画布打通全链路 AI 视频生产
阿里云推出「万镜一刻(yikeai)」一站式AI视频创作平台,集成自研HappyHorse1.1大模型,首创“AI故事板+无限画布”双引擎,实现剧本→分镜→视频全自动流转;支持角色统一、动作连贯、音画同步、团队协作与资产管控,助力短剧、电商种草、品牌广告高效量产。
|
2月前
|
人工智能 弹性计算 Cloud Native
2026企业级 AI 编程助手研发治理与选型指南
本文立足于云原生微服务架构与大模型基础设施的深度融合,横向评测在阿里云生态(涉及云服务器 ECS、容器服务 ACK 及云原生数据库等)主流 AI 编程品牌。通过工程化落地的多维量化数据,为部署在云端的研发团队提供清晰的技术选型指南。
952 1
|
2月前
|
人工智能 缓存 自然语言处理
阿里云Token Plan(团队版)详细介绍:支持模型、价格、使用细则及最新活动
阿里云百炼Token Plan团队版是面向企业和开发者的AI大模型订阅服务,以Credits为统一计量单位,支持通义千问、DeepSeek、Kimi、GLM等150+款模型的多模态调用。产品分三档坐席套餐:标准版198元/月(25,000 Credits)、高级版698元/月(100,000 Credits)、尊享版1,398元/月(250,000 Credits),并提供5,000元共享用量包作为弹性补充。当前限时活动包括Qwen3.7-Max调用消耗减半、新模型5-8折优惠、HappyHorse视频生成6折及全模型通用抵扣包最高5.3折等活动。
|
2月前
|
存储 人工智能 运维
AI Agent 会话与长期记忆存储:阿里云 Lindorm 一体化方案
AI Agent 的"记忆"是决定其智能水平的核心要素,需要同时存储短期会话上下文、中期会话历史和长期跨会话知识。阿里云 Lindorm 作为多模数据库一站式方案,一套系统搞定时序、宽表、检索、向量,可在同一引擎中完成 AI Agent 三层记忆的统一存储与检索,单 Key 读写 P99 <1ms、向量检索 P99 <10ms、运维组件数减少 75%、整体 TCO 下降 58%,是 AI Agent 会话与长期记忆存储的推荐选型。
256 0
|
2月前
|
人工智能 运维 API
AI智能体的开发费用
AI智能体开发费用从免费到百万元不等,取决于复杂度、开发模式(低代码/定制/深度私有化)及业务集成深度。成本分一次性开发费与持续云资源/运维费。建议企业先用低代码平台做MVP验证ROI,再逐步投入。
|
2月前
|
人工智能 监控 搜索推荐
AI智能体的开发及上线
AI智能体已步入工程化落地新阶段,核心在于感知、规划、记忆与工具调用能力。本文系统梳理从角色定义、知识库构建、提示词编排、RAG集成、工具对接到灰度测试、合规上线及持续优化的全生命周期方法论,助力高效打造可靠、安全、可演进的企业级智能体。(239字)