深入解析 Flutter 路由与导航：从基础到项目实战

深入解析 Flutter 路由与导航：从基础到项目实战

在 Flutter 中，路由与导航是构建多页面应用的核心功能。无论是简单的页面跳转，还是复杂的多级路由管理，掌握路由与导航的使用是开发高质量 Flutter 应用的关键。本篇博客将从基础到高级，详细介绍 Flutter 的路由与导航功能，并结合实际项目场景，探讨如何使用第三方路由库（如 go_router 和 auto_route）实现高效的路由管理。

1. 路由与导航的基础概念

1.1 什么是路由？

• 路由是页面的唯一标识符，用于管理页面的跳转和导航。
• 在 Flutter 中，路由可以是一个简单的字符串（命名路由）或一个复杂的对象（自定义路由）。

1.2 Navigator 的作用

• Navigator 是 Flutter 提供的内置导航管理器，用于管理页面的堆栈。
• 页面跳转时，新的页面会被推入堆栈；返回时，页面会从堆栈中弹出。

2. Flutter 内置路由与导航

2.1 基本路由

Flutter 提供了 Navigator.push 和 Navigator.pop 方法，用于实现页面的跳转和返回。

示例代码

// 页面 A
class PageA extends StatelessWidget {
   
   
  @override
  Widget build(BuildContext context) {
   
   
    return Scaffold(
      appBar: AppBar(title: Text("页面 A")),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
   
   
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => PageB()),
            );
          },
          child: Text("跳转到页面 B"),
        ),
      ),
    );
  }
}

// 页面 B
class PageB extends StatelessWidget {
   
   
  @override
  Widget build(BuildContext context) {
   
   
    return Scaffold(
      appBar: AppBar(title: Text("页面 B")),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
   
   
            Navigator.pop(context);
          },
          child: Text("返回页面 A"),
        ),
      ),
    );
  }
}

代码解析

1. Navigator.push：
   • 将页面 B 推入导航堆栈。
   • 使用 MaterialPageRoute 定义页面的路由。
2. Navigator.pop：
   • 从导航堆栈中弹出页面 B，返回页面 A。

2.2 命名路由

命名路由通过字符串标识页面，适合管理多页面应用。

示例代码

void main() {
   
   
  runApp(MaterialApp(
    initialRoute: '/',
    routes: {
   
   
      '/': (context) => PageA(),
      '/pageB': (context) => PageB(),
    },
  ));
}

// 页面 A
class PageA extends StatelessWidget {
   
   
  @override
  Widget build(BuildContext context) {
   
   
    return Scaffold(
      appBar: AppBar