作者 | 弗拉德
來源 | 弗拉德（公眾號：fulade_me)
路由
在移動開發(fā)中，我們管頁面之間的跳轉叫做路由腰湾。在iOS中指的就是ViewController之間的跳轉，在Android中就是Activity之間的跳轉犁珠。路由是在移動端開發(fā)中非常重要的概念捧韵，它負責管理著各個頁面之間的跳轉還有傳值工作，是必不可缺少的控件秤掌。
路由Map
為了方便我們管理跳轉頁面愁铺，Flutter為我們 提供了路由Map。
路由Map由在main.dart文件里面MaterialApp的參數(shù)routes管理闻鉴，routes參數(shù)接收一個Map茵乱，Map里面就是我們項目的路由Map，你可以打開我的項目看到routes參數(shù)如下：
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項目的入口頁面孟岛，這里需要另外一個很重要的參數(shù)initialRoute來配合使用
我們給initialRoute參數(shù)傳值如下：
initialRoute: "/",
這里表示的是Flutter項目的入口頁面對應的key是/瓶竭，那么就會找到在routes中/對應的頁面，也就是MainPage()
需要注意的是：
默認我們新創(chuàng)建的Flutter項目中MaterialApp是帶有home這個參數(shù)的渠羞，它也表示也是入口頁面斤贰。如果我們想要要使用路由Map的方式來管理路由，一定需要把home參數(shù)刪除掉堵未。
Navigator.pushNamed
在我們聲明好路由Map之后腋舌，我們就可以傳入前面的key的值來實現(xiàn)頁面的跳轉工作，這個時候我們需要借助的API是Navigator.pushNamed
@optionalTypeArgs
static Future<T> pushNamed<T extends Object>(
BuildContext context, /// context
String routeName, { /// 路由Map中 key 的值
Object arguments, /// 參數(shù)
}) {
return Navigator.of(context).pushNamed<T>(routeName, arguments: arguments);
}
只需要傳入路由Map中key的值就可以實現(xiàn)跳轉渗蟹。
代碼如下：
Navigator.pushNamed(context, "RouterDemoPage2");
由于我們是跨平臺開發(fā)块饺，F(xiàn)lutter幫助我們實現(xiàn)了跳轉時候的轉場動畫，在iOS中動畫是從右側滑入到左側雌芽，返回的時候同樣是由左側滑出到右側授艰。在Android則是由下方彈出顯示到上方，返回的時候是由上方退出到下方彈出世落。
跳轉傳值
很多時候我們希望跳轉的時候可以傳值過去淮腾，這個時候我們可以通過自定義MaterialPageRoute來實現(xiàn)傳值。
MaterialPageRoute({
/// builder 方法
@required this.builder,
/// 配置信息
RouteSettings settings,
/// 默認情況下，當入棧一個新路由時谷朝，原來的路由仍然會被保存在內存中洲押，如果想在路由沒用的時候釋放其所占用的所有資源，可以設置maintainState為false圆凰。
this.maintainState = true,
/// 表示新頁面是否是全屏展示杈帐，在iOS中，如果fullscreenDialog為true，新頁面將會從屏幕底部滑入
bool fullscreenDialog = false,
})
我們只需要在構建新的頁面的時候傳入我們想要傳遞的參數(shù)即可
Navigator.of(context).push(MaterialPageRoute(builder: (context) {
return RouterDemoPage3(passText: "Fulade");
}));
返回傳值
傳遞返回值我們使用Navigator的pop方法即可
Navigator.pop(context, "pop value");
pop方法接收一個參數(shù)為返回的攜帶的參數(shù)，如果我們有多個參數(shù)报破，可以把它封裝為List或Map即可。
返回值我們需要在push方法后面使用then來接收
Navigator.of(context)
.push(MaterialPageRoute(builder: (context) {
return RouterDemoPage3(passText: "Fulade");
})).then((value) {
setState(() {
title = value;
});
});
then函數(shù) 涉及到了Dart語音中很重要的概念 await 和future站叼，后面有機會我們再來詳細的說。
想體驗以上的示例的運行效果菇民，可以到我的Github倉庫項目flutter_app->lib->routes->router_page.dart查看尽楔，并且可以下載下來運行并體驗。
