【Flutter 3-2】Flutter进阶教程——路由Router和导航Navigator以及传值

做者 | 弗拉德
来源 | 弗拉德（公众号：fulade_me)

路由

在移动开发中，咱们管页面之间的跳转叫作路由。在iOS中指的就是ViewController之间的跳转，在Android中就是Activity之间的跳转。路由是在移动端开发中很是重要的概念，它负责管理着各个页面之间的跳转还有传值工做，是必不可缺乏的控件。

路由Map

为了方便咱们管理跳转页面，Flutter为咱们 提供了路由Map。
路由Map由在main.dart文件里面MaterialApp的参数routes管理，routes参数接收一个Map，Map里面就是咱们项目的路由Map，你能够打开个人项目看到routes参数以下：

routes: {
  "/": (context) => MainPage(),
  "TextDemoPage": (context) => TextDemoPage(),
  "RaisedButtonDemoPage": (context) => RaisedButtonDemoPage(),
  "FlatButtonDemoPage": (context) => FlatButtonDemoPage(),
  "OutlineButtonDemoePage": (context) => OutlineButtonDemoePage(),
  "IconButtonDemoPage": (context) => IconButtonDemoPage(),
  "ContainerDemoPage": (context) => ContainerDemoPage(),
  "StatefulWidgetDemoPage": (context) => StatefulWidgetDemoPage(),
  "TextFieldDemoPage": (context) => TextFieldDemoPage(),
  "ImageDemoPage": (context) => ImageDemoPage(),
  "ColumnDemoPage": (context) => ColumnDemoPage(),
  "RowDemoPage": (context) => RowDemoPage(),
  "FlexibleDemoPage": (context) => FlexibleDemoPage(),
  "WrapDemoPage": (context) => WrapDemoPage(),
  "ListViewDemoPage": (context) => ListViewDemoPage(),
  "GridViewDemoPage": (context) => GridViewDemoPage(),
  "BottomNavigationBarDemoPage": (context) =>
      BottomNavigationBarDemoPage(),
  "RouterDemoPage": (context) => RouterDemoPage(),
  "RouterDemoPage2": (context) => RouterDemoPage2(),
},

其中key为/对应的Value是整个Flutter项目的入口页面，这里须要另一个很重要的参数initialRoute来配合使用
咱们给initialRoute参数传值以下：

initialRoute: "/",

这里表示的是Flutter项目的入口页面对应的key是/，那么就会找到在routes中/对应的页面，也就是MainPage()

须要注意的是：
默认咱们新建立的Flutter项目中 MaterialApp是带有 home这个参数的，它也表示也是入口页面。若是咱们想要要使用路由Map的方式来管理路由，必定须要把 home参数删除掉。

Navigator.pushNamed

在咱们声明好路由Map以后，咱们就能够传入前面的key的值来实现页面的跳转工做，这个时候咱们须要借助的API是Navigator.pushNamed

@optionalTypeArgs
  static Future<T> pushNamed<T extends Object>(
    BuildContext context,    /// context
    String routeName, {     /// 路由Map中 key 的值
    Object arguments,        /// 参数
   }) {
    return Navigator.of(context).pushNamed<T>(routeName, arguments: arguments);
  }

只须要传入路由Map中key的值就能够实现跳转。
代码以下：

Navigator.pushNamed(context, "RouterDemoPage2");

因为咱们是跨平台开发，Flutter帮助咱们实现了跳转时候的转场动画，在iOS中动画是从右侧滑入到左侧，返回的时候一样是由左侧滑出到右侧。在Android则是由下方弹出显示到上方，返回的时候是由上方退出到下方弹出。

跳转传值

不少时候咱们但愿跳转的时候能够传值过去，这个时候咱们能够经过自定义MaterialPageRoute来实现传值。

MaterialPageRoute({
    /// builder 方法
    @required this.builder,
    /// 配置信息
    RouteSettings settings,
    ///  默认状况下，当入栈一个新路由时，原来的路由仍然会被保存在内存中，若是想在路由没用的时候释放其所占用的全部资源，能够设置maintainState为false。
    this.maintainState = true,
    ///  表示新页面是不是全屏展现，在iOS中，若是fullscreenDialog为true，新页面将会从屏幕底部滑入
    bool fullscreenDialog = false,
})

咱们只须要在构建新的页面的时候传入咱们想要传递的参数便可

Navigator.of(context).push(MaterialPageRoute(builder: (context) {
  return RouterDemoPage3(passText: "Fulade");
}));

返回传值

传递返回值咱们使用Navigator的pop方法便可

Navigator.pop(context, "pop value");

pop方法接收一个参数为返回的携带的参数，若是咱们有多个参数，能够把它封装为List或Map便可。

返回值咱们须要在push方法后面使用then来接收

Navigator.of(context)
    .push(MaterialPageRoute(builder: (context) {
  return RouterDemoPage3(passText: "Fulade");
})).then((value) {
  setState(() {
    title = value;
  });
});

then函数 涉及到了Dart语音中很重要的概念 await 和future，后面有机会咱们再来详细的说。

想体验以上的示例的运行效果，能够到个人Github仓库项目flutter_app->lib->routes->router_page.dart查看，而且能够下载下来运行并体验。

---