【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查看，而且能夠下載下來運行並體驗。

---