Flutter路由管理

封面图 • 2025-10-25 • Flutter

在 Flutter 中，**路由管理（Routing Management）** 是用于在不同页面（Widget）之间进行导航的机制。Flutter 提供了多种方式来实现路由管理，包括使用 `Navigator` 和 `MaterialPageRoute`、`CupertinoPageRoute` 等，以及更高级的路由管理方案如 `GoRouter` 或 `Riverpod` 等。

---

## 一、基本路由管理（使用 `Navigator`）

### 1. 基本用法

```dart
// 跳转到新页面
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondPage()),
);

// 返回上一页
Navigator.pop(context);
```

### 2. 带返回值的跳转

```dart
// 跳转并等待返回值
final result = await Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondPage()),
);

// 在 SecondPage 中返回数据
Navigator.pop(context, 'Hello from SecondPage');
```

---

## 二、命名路由（Named Routes）

命名路由可以让你通过名称来导航，而不是每次都构造 `MaterialPageRoute`。

### 1. 定义命名路由

```dart
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      initialRoute: '/',
      routes: {
        '/': (context) => HomePage(),
        '/second': (context) => SecondPage(),
      },
    );
  }
}
```

### 2. 使用命名路由跳转

```dart
Navigator.pushNamed(context, '/second');
```

### 3. 带参数的命名路由

```dart
// 跳转时传参
Navigator.pushNamed(context, '/second', arguments: {'name': 'John'});

// 接收参数
class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final args = ModalRoute.of(context)!.settings.arguments as Map<String, dynamic>;
    return Text('Hello, ${args['name']}');
  }
}
```

---

## 三、嵌套路由（Tab Navigation / Bottom Navigation）

Flutter 提供了 `BottomNavigationBar` 来实现底部导航栏，常用于多页应用。

```dart
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _currentIndex = 0;

final List<Widget> _pages = [
    HomeScreen(),
    ProfileScreen(),
  ];

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
        ],
      ),
    );
  }
}
```

---

## 四、高级路由管理：GoRouter（推荐）

`GoRouter` 是一个轻量级的第三方库，提供更强大的路由管理功能，支持嵌套路由、动态路由、命名路由等。

### 1. 添加依赖

在 `pubspec.yaml` 中添加：

```yaml
dependencies:
  go_router: ^6.0.0
```

### 2. 配置路由

```dart
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final GoRouter _router = GoRouter(
    routes: [
      GoRoute(
        path: '/',
        builder: (context, state) => HomeScreen(),
      ),
      GoRoute(
        path: '/second',
        builder: (context, state) => SecondScreen(),
      ),
    ],
  );

@override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: _router,
    );
  }
}
```

### 3. 导航

```dart
GoRouter.of(context).push('/second');
```

---

## 五、其他高级路由方案

| 方案 | 特点 |
|------|------|
| `GoRouter` | 强大、灵活，适合中大型项目 |
| `Fluro` | 早期流行的路由库，支持参数和嵌套 |
| `Riverpod` + `GoRouter` | 状态管理和路由结合使用，适合复杂项目 |
| `Provider` | 状态管理，可与路由结合使用 |

---

## 六、总结

| 功能 | 方法 |
|------|------|
| 基础跳转 | `Navigator.push()` / `Navigator.pop()` |
| 命名路由 | `MaterialApp.routes` / `Navigator.pushNamed()` |
| 参数传递 | `arguments` 参数 |
| 嵌套路由 | `BottomNavigationBar` / `GoRouter` |
| 复杂路由 | `GoRouter` / `Fluro` |

---

如果你有具体的场景或问题（比如：如何实现登录后跳转首页？如何处理深层嵌套路由？），欢迎继续提问！我可以为你提供更详细的解决方案。