Flutter 中的导航如何工作?

Question

Flutter 中的导航如何工作?

Accepted Answer

**Navigation** 在 Flutter 中是在屏幕(pages/routes)之间移动 — 使用 **Navigator**(一个路由堆栈)进行基本导航,或对于更复杂的应用使用声明式路由包。理解导航对构建多屏幕应用至关重要。

## 使用 Navigator 进行基本导航(一个堆栈)

```dart
// the Navigator manages a STACK of routes (screens)
// PUSH a new screen onto the stack (navigate to it)
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondScreen()),
);

// POP — go back (remove the top screen, return to the previous)
Navigator.pop(context);
```

```text
Think of navigation as a STACK of screens:
  → PUSH adds a screen on top (navigate forward)
  → POP removes the top screen (go back)
  → the back button / gesture also pops
```

## 在屏幕之间传递数据

```dart
// pass data forward (via the constructor)
Navigator.push(context, MaterialPageRoute(
  builder: (context) => DetailScreen(itemId: 42),
));

// return data back when popping
Navigator.pop(context, result);          // return a result
final result = await Navigator.push(...); // receive it (push returns a Future)
```

## 命名路由和现代路由

```dart
// NAMED routes — define routes by name (cleaner for many screens)
Navigator.pushNamed(context, '/details');
// configured in MaterialApp(routes: {...})

// MODERN: declarative routing packages (go_router) for complex apps:
//   → URL-based routing, deep linking, web support, nested navigation
//   → go_router is the recommended approach for non-trivial apps
```

## 为什么这很重要

理解导航至关重要,因为 **大多数应用都有多个屏幕**,在它们之间移动是应用功能的基础,所以这是 Flutter 必知的知识。

核心概念 — Flutter 的 **Navigator 管理一个路由(屏幕)堆栈**,其中你 **push** 来前进导航(在顶部添加一个屏幕),**pop** 来返回(删除顶部屏幕) — 是导航的基础心智模型,堆栈隐喻(与用户在应用中前后导航的方式匹配)使其直观易理解。

理解 **基本导航**(push/pop)对于任何多屏幕应用都是必需的。

理解 **在屏幕之间传递数据**(通过构造函数向前发送数据,并在 pop 时返回结果,因为 push 返回一个 Future)至关重要,因为屏幕通常需要共享数据(向详情屏幕传递一个项目,返回一个选择)。

理解 **命名路由**(通过名称定义路由以便组织众多屏幕)和特别是 **现代声明式路由**(如 **go_router** 的包,推荐用于非平凡应用,提供基于 URL 的路由、深层链接、Web 支持和嵌套导航)反映了当前的最佳实践 — 当应用增长时,声明式路由相比命令式 push/pop 能更好地处理复杂性。

由于几乎所有应用都有多个屏幕,在它们之间导航(并传递数据)是应用功能的基础,而且理解 Navigator 堆栈模型、数据传递和现代路由(go_router)对构建多屏幕应用是必需的,所以理解 Flutter 中的导航是基础性的必知知识 — 这是几乎每个 Flutter 应用都需要的核心能力,也是构建真实应用所需的多屏幕体验的必要条件。