【Flutter】路由与导航：基础路由与导航

在构建 Flutter 应用时，页面间的导航是不可避免的。当应用规模逐渐扩大时，我们常常需要在不同页面之间进行跳转，并且需要管理页面栈，处理页面之间的数据传递。Flutter 提供了一套强大且灵活的导航和路由管理机制，主要通过 Navigator 来管理页面的跳转与返回。本文将详细介绍如何使用 Navigator 实现基础的路由与导航，包括如何在不同页面之间跳转、返回以及如何传递参数。

Navigator 简介

Navigator 是 Flutter 提供的用于管理页面导航的核心组件。它的内部维护了一个 页面栈（stack），每当你导航到新页面时，新页面会被压入栈顶，返回时会从栈顶弹出页面。我们可以通过 push() 方法将页面添加到栈中，通过 pop() 方法从栈中移除页面。

常用方法

• Navigator.push()：将一个新的页面压入栈顶，展示该页面。
• Navigator.pop()：从栈顶移除页面，返回到上一页面。

示例

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: FirstPage(), // 应用的初始页面);}
}class FirstPage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('First Page'),),body: Center(child: ElevatedButton(child: Text('Go to Second Page'),onPressed: () {// 使用 Navigator.push 跳转到第二个页面Navigator.push(context,MaterialPageRoute(builder: (context) => SecondPage()),);},),),);}
}class SecondPage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Second Page'),),body: Center(child: ElevatedButton(child: Text('Back to First Page'),onPressed: () {// 使用 Navigator.pop 返回到第一个页面Navigator.pop(context);},),),);}
}

代码解析

1. Navigator.push：在 FirstPage 中，我们使用 Navigator.push 将 SecondPage 压入栈中并进行页面跳转。
2. Navigator.pop：在 SecondPage 中，我们使用 Navigator.pop 返回到 FirstPage，即从页面栈顶移除当前页面。

页面栈的管理

Flutter 的导航系统基于栈的概念，因此每次导航都会将页面压入栈顶，而 Navigator.pop() 则会将当前页面从栈顶移除并返回到上一页面。理解这一点对于有效管理页面的跳转和返回非常重要。

示例：从第三个页面返回到第一个页面

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: FirstPage(),);}
}class FirstPage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('First Page'),),body: Center(child: ElevatedButton(child: Text('Go to Second Page'),onPressed: () {Navigator.push(context,MaterialPageRoute(builder: (context) => SecondPage()),);},),),);}
}class SecondPage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Second Page'),),body: Center(child: ElevatedButton(child: Text('Go to Third Page'),onPressed: () {Navigator.push(context,MaterialPageRoute(builder: (context) => ThirdPage()),);},),),);}
}class ThirdPage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Third Page'),),body: Center(child: ElevatedButton(child: Text('Back to First Page'),onPressed: () {// 连续调用 Navigator.pop() 返回到第一个页面Navigator.popUntil(context, ModalRoute.withName('/'));},),),);}
}

代码解析

• Navigator.popUntil()：可以在页面栈中向后弹出页面，直到指定的路由为止。在这里，ModalRoute.withName('/') 返回到应用的根页面（FirstPage）。

命名路由

虽然通过 MaterialPageRoute 构建路由跳转非常灵活，但在大型应用中，页面多了以后可能会让路由管理变得繁琐。为此，Flutter 提供了 命名路由 来简化页面导航。

设置命名路由

在 MaterialApp 中，可以通过 routes 参数定义应用的命名路由。

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(// 定义命名路由routes: {'/': (context) => FirstPage(),'/second': (context) => SecondPage(),'/third': (context) => ThirdPage(),},initialRoute: '/', // 初始路由);}
}class FirstPage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('First Page'),),body: Center(child: ElevatedButton(child: Text('Go to Second Page'),onPressed: () {// 使用命名路由跳转到第二个页面Navigator.pushNamed(context, '/second');},),),);}
}class SecondPage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Second Page'),),body: Center(child: ElevatedButton(child: Text('Go to Third Page'),onPressed: () {Navigator.pushNamed(context, '/third');},),),);}
}class ThirdPage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Third Page'),),body: Center(child: ElevatedButton(child: Text('Back to First Page'),onPressed: () {Navigator.popUntil(context, ModalRoute.withName('/'));},),),);}
}

代码解析

1. routes 参数：定义了页面与路由名称的映射。在本例中，/ 对应 FirstPage，/second 对应 SecondPage，/third 对应 ThirdPage。
2. Navigator.pushNamed()：使用命名路由进行页面跳转，简化了手动构建 MaterialPageRoute 的步骤。

传递参数

在实际项目中，页面之间的跳转往往需要传递参数，比如从列表页面跳转到详情页面时，我们需要传递某个列表项的数据。在 Flutter 中，既可以在使用 Navigator.push 的时候传递参数，也可以在使用命名路由时传递参数。

使用 Navigator.push 传递参数

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: FirstPage(),);}
}class FirstPage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('First Page'),),body: Center(child: ElevatedButton(child: Text('Go to Second Page'),onPressed: () {// 跳转到第二个页面并传递参数Navigator.push(context,MaterialPageRoute(builder: (context) => SecondPage(message: 'Hello from First Page!'),),);},),),);}
}class SecondPage extends StatelessWidget {final String message;SecondPage({required this.message});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Second Page'),),body: Center(child:Text(message), // 显示传递的参数),);}
}

代码解析

• message 参数传递：在 FirstPage 中，我们将 message 参数通过 MaterialPageRoute 传递给 SecondPage。在 SecondPage 中，通过构造函数接收参数，并在 UI 中展示。

使用命名路由传递参数

使用命名路由时，可以通过 Navigator.pushNamed 的 arguments 参数来传递数据。

Navigator.pushNamed(context,'/second',arguments: 'Hello from First Page!',
);

在目标页面中，通过 ModalRoute.of(context) 来接收参数：

class SecondPage extends StatelessWidget {@overrideWidget build(BuildContext context) {final args = ModalRoute.of(context)!.settings.arguments as String;return Scaffold(appBar: AppBar(title: Text('Second Page'),),body: Center(child: Text(args), // 显示传递的参数),);}
}

总结

通过本教程，你已掌握了 Flutter 中的基础路由与导航的使用。以下是本教程的重点：

• 页面跳转与返回：使用 Navigator.push() 和 Navigator.pop() 实现基本的页面跳转与返回。
• 命名路由：通过 routes 参数定义路由表，并使用 Navigator.pushNamed() 进行页面跳转。
• 页面栈管理：理解页面栈的概念，使用 Navigator.popUntil() 返回到指定页面。
• 参数传递：学会在页面之间传递参数，既可以通过 Navigator.push()，也可以通过 Navigator.pushNamed()。

掌握这些基本的导航技巧后，你将能够轻松地在 Flutter 应用中实现页面间的跳转和状态传递。