PS：想做一件事很容易，真正去做一件事很困难。
Navigator 使用堆栈规则来管理 Widget，Navigator 记录了页面访问记录，可以使用 Navigator 来完成页面之间的跳转操作。
在 Android 开发中，我们平时说的跳转都是指的是 Activity 的跳转，也称为页面跳转，在 Fluter 中都是指的是 Route 的跳转，Android 中的页面在 Flutter 中对应 Route，Navigator 负责 Route 对象堆栈的管理，并提供管理堆栈的方法，如 Navigator.push 和 Navigator.pop。
如上 Flutter 提供了 Route 入栈、Route 出栈的方法，Android 中一些设备有返回键，这个返回键是兼容 Flutter 的 Navigator.push 和 Navigator.pop 方法，如果某些设备没有对应的返回键可以在 AppBar 中自行添加返回按钮， Scaffold 中已经添加了返回按钮，触发的时候会调用 Navigator.pop 操作，本文内容如下：
基本路由导航
路由参数传递
其他路由导航
基本路由导航
前面提到 Flutter 中使用堆栈来管理 Widget，入栈、出栈的方法分别是 Navigator.push 和 Navigator.pop，通过这两个方法来完成页面之间的跳转、回退操作。
Navigator.push
Navigator.push 用来执行 Route 的入栈操作，就可以通过指定的 Route 跳转到对应的页面了，方法如下：
static Future<T> push<T extends Object>(BuildContext context, Route<T> route) {
return Navigator.of(context).push(route);
使用 MaterialPageRoute 构建对应页面的路由，使用方式如下：
_navigateToPage(context, NavigatorPushPopPage());
_navigateToPage(BuildContext context, Widget widget) {
Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) {
return widget;
Navigator.pop
Navigator.pop 用来执行 Route 的退栈操作，即页面回退，可以添加可选参数 result 作为页面返回时携带的参数，方法如下：
static bool pop<T extends Object>(BuildContext context, [ T result ]) {
return Navigator.of(context).pop<T>(result);
如下，点击 IconButton 退出当前页面：
IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () => Navigator.pop(context)),
Navigator.pushnamed
Navigator.pushnamed 用来执行已命名 Route 的入栈操作，可以在通过可选参数 arguments 传递参数，方法如下：
static Future<T> pushNamed<T extends Object>(
BuildContext context,
String routeName, {
Object arguments,
return Navigator.of(context).pushNamed<T>(routeName, arguments: arguments);
使用时首先在 MaterialApp 里面将对应的路由名称添加到路由表 routes 中，代码参考如下：
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
home: HomePage(),
routes: <String, WidgetBuilder>{
NavigatorPushNamedPage.routeName: (BuildContext context) =>
NavigatorPushNamedPage(),
class NavigatorPushNamedPage extends StatelessWidget {
static final routeName = '/NavigatorPushNamedPage';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Navigator.pushNamed"),
centerTitle: true,
body: Center(
child: Text(
"Navigator.pushNamed",
style: TextStyle(fontSize: 18),
然后就可以使用 Navigator.pushNamed 跳转到 NavigatorPushNamedPage 这个页面了，如下：
_navigatePushNamedPage(context, NavigatorPushNamedPage.routeName);
_navigatePushNamedPage(BuildContext context, String routeName,
[Object arguments]) {
Navigator.pushNamed(context, routeName, arguments: arguments);
以上就是 Flutter 中最基础的页面导航方式，无论是 Navigator.push 还是 Navigator.pushNamed 都是基于 NavigatorState 中的 push 方法实现的，NavigatorState 通过具体的 BuildContext 由 Navigator.of(context) 获取，NavigatorState 的 push 方法如下：
Future<T> push<T extends Object>(Route<T> route) {
assert(!_debugLocked);
assert(() { _debugLocked = true; return true; }());
assert(route != null);
assert(route._navigator == null);
final Route<dynamic> oldRoute = _history.isNotEmpty ? _history.last : null;
route._navigator = this;
route.install(_currentOverlayEntry);
_history.add(route);
route.didPush();
route.didChangeNext(null);
if (oldRoute != null) {
oldRoute.didChangeNext(route);
route.didChangePrevious(oldRoute);
for (NavigatorObserver observer in widget.observers)
observer.didPush(route, oldRoute);
RouteNotificationMessages.maybeNotifyRouteChange(_routePushedMethod, route, oldRoute);
assert(() { _debugLocked = false; return true; }());
_afterNavigation(route);
return route.popped;
下面介绍一下 Fluter 中参数的传递，包括页面跳转时参数的传递以及页面回退是参数的传递。
路由参数传递
页面跳转过程中的参数传递包括页面跳转时携带参数和页面回退时携带参数。
Navigator.push携带参数
使用 Navigator.push 携带参数进行页面跳转，参数是通过对应页面的构造方法接收的，具体使用参考如下：
_navigateToPage(context,
NavigatorPushWithParamPage(
param: "this info from last page!",
_navigateToPage(BuildContext context, Widget widget) {
Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) {
return widget;
class NavigatorPushWithParamPage extends StatelessWidget {
final String param;
NavigatorPushWithParamPage({
this.param,
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Navigator.push携带参数"),
centerTitle: true,
body: Center(
child: Text(
"arguments:${this.param}",
style: TextStyle(fontSize: 18),
Navigator.pushNamed携带参数
从上文可知 Navigator.pushNamed(context,routrName,{arguments}) 方法参数中的可选参数 arguments 就是跳转要携带的参数，首先在 MaterialApp 下的 onGenerateRoute 中接收通过 arguments 传递过来的参数，如下：
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
home: HomePage(),
onGenerateRoute: (RouteSettings settings) {
if (settings.name == NavigatorPushNamedWithParamPage.routeName) {
return MaterialPageRoute<String>(builder: (BuildContext context) {
return NavigatorPushNamedWithParamPage(settings.arguments);
}else{
return null;
然后使用 Navigator.pushNamed 进行页面跳转，参数还是对应页面的构造方法接收，参考如下：
_navigatePushNamedPage(
context,
NavigatorPushNamedWithParamPage.routeName,
"this info from last page!");
_navigatePushNamedPage(BuildContext context, String routeName,
[Object arguments]) {
Navigator.pushNamed(context, routeName, arguments: arguments);
class NavigatorPushNamedWithParamPage extends StatelessWidget {
static final String routeName = '/NavigatorPushNamedWithParamPage';
final String info;
NavigatorPushNamedWithParamPage(this.info);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Navigator.pushNamed携带参数"),
centerTitle: true,
body: Center(
child: Text(
"arguments:${this.info}",
style: TextStyle(fontSize: 18),
页面返回时携带参数
从上文可知 Navigator.pop(context,[result]) 方法参数中的可选参数 result 就是页面回退时携带的参数，Navigator.push 会返回一个 Future 在 then 语句中处理页面回退的结果，具体使用参考如下：
_navigatePopWithParamPage(context, NavigatorPopWithParamPage());
_navigatePopWithParamPage(BuildContext context, Widget widget) {
Navigator.push<String>(context,
MaterialPageRoute(builder: (BuildContext context) {
return widget;
})).then((result) {
Toast.show("Navigator.pop返回时携带参数：" + result, context);
class NavigatorPopWithParamPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return WillPopScope(
child: Scaffold(
appBar: AppBar(
title: Text("Navigator.pop返回时携带参数"),
centerTitle: true,
body: Center(
child: Text(
"Navigator.pop返回时携带参数",
style: TextStyle(fontSize: 18),
onWillPop: () => _popBack(context));
_setResult(BuildContext context) {
Navigator.pop(context, "this message from NavigatorPopWithParamPage!");
Future<bool> _popBack(BuildContext context) {
_setResult(context);
return Future.value(false);
其他路由导航
其他常用路由导航方式如下：
Navigator.popAndPushNamed
Navigator.popUntil
Navigator.pushAndRemoveUntil
Navigator.pushReplacement
其他与路由相关的操作方法就不一一列举了，可以查看相关 API，更多内容见微信公众号躬行之。
- 3335
-
chonglingliu
Flutter
- 6674
-
zcchongpangzi
Flutter
- 2827
-
IAM17
Flutter
Android
