概述

导航是移动应用开发中的核心概念。它决定了用户如何在不同页面之间切换。良好的导航设计能够使应用结构清晰，并提升其功能性。

路由是指定义导航元素及其对应页面的过程。我们可以将屏幕或页面视为“路径”。

导航栈

在处理导航时，Flutter 采用栈（Stack）机制：后进先出（LIFO）。最后压入栈的页面会显示给用户，也是最先被弹出的页面。

以下是导航栈的示意图：

管理导航栈

在 Flutter 中，我们可以通过两种方式来处理导航：

• 命令式导航
• 声明式导航

命令式导航

Navigator 1.0 是命令式导航的标准实现，使用 Navigator 小部件作为路由机制。

在命令式导航中，我们只能将页面添加到导航栈的顶部，或移除栈顶的页面。路由通过命名或匿名方式压入或弹出导航栈。

常用的 API 包括：

• push()：将新路由添加到栈顶。
• pop()：从栈顶移除当前路由。

Navigator 1.0 简单易用，但存在一些局限性。命令式导航的主要缺点包括：

• 难以同时压入或弹出多个页面。
• 难以在栈顶页面下方插入或删除页面。
• 难以管理和扩展。
• 在嵌套导航场景下，Android 系统返回按钮可能无法正常工作。

使用声明式导航可以解决上述问题。

声明式导航

Navigator 2.0 是声明式导航的标准实现，它并不取代 Navigator 1.0，两者可以共存。它使用 Router 小部件作为路由机制。

这种导航方式允许我们完全掌控导航栈的状态。

要理解 Navigator 2.0，需要掌握以下概念：

• Page：一个抽象类，用于管理导航栈的历史记录。
• Router：配置 Navigator 2.0 应该打开或关闭的页面列表。
• RouteInformationParser：将来自 RouteInformationProvider 的路由信息转换为自定义数据类型，并将自定义数据类型转换回路由信息。
• RouteInformationProvider：提供路由信息。
• RouterDelegate：监听 RouteInformationParser 和应用状态，用于构建和配置导航组件。
• BackButtonDispatcher：将系统返回按钮的点击事件传递给 Router。
• TransitionDelegate：决定页面进出屏幕的过渡动画方式。

以下是 Flutter 官方团队提供的相关概念示意图：

相比 Navigator 1.0，Navigator 2.0 显得更为复杂。那么为什么要使用它？声明式导航的优势包括：

• 对导航栈拥有更高的控制权。
• 更好地支持 Android 系统返回按钮。
• 可在同一应用中同时使用命令式和声明式导航。
• 支持网页 URL 和深度链接处理。
• 以及其他诸多优点！

那么，我们该如何选择使用命令式还是声明式导航？

• 如果开发小型演示类应用，推荐使用命令式导航。
• 如果开发大型复杂应用，建议采用声明式导航。

在接下来的课程中，我们将通过一个购物应用实例，分别使用命令式和声明式导航来实现页面跳转，如下图所示：