Route
所謂路由管理，就是管理頁面之間如何跳轉，也被稱為導航管理。這和原生開發類似，無論是Android還是iOS，導航管理都是通過維護一個路由棧來實現的，路由入棧(push)操作對應開啟一個新頁面，路由出棧(pop)操作對應頁面關閉操作。在Flutter開發中，實現頁面跳轉需要同時使用Route 和 Navigator。
- Route是一個應用程式抽象的螢幕或頁面；
- Navigator 是一個管理路由的widget；
路由(Route)，在移動開發中通常用來表示移動應用的頁面（Page），具體來說，Route在Android中通常指一個Activity，在iOS中指一個ViewController。
Navigator是一個路由管理的widget，它通過一個棧來管理一個路由widget集合。通常當前螢幕顯示的頁面就是棧頂的路由，Navigator提供了一系列方法來管理路由棧。
示例
為了說明Flutter是如何實現路由跳轉的，我們建立兩個頁面：NewRoute.dart和main.dart。 其中，NewRoute.dart的原始碼如下：
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('新頁面')
),
body: new Center(
child: new Text(
'點選浮動按鈕返回首頁',
),
),
floatingActionButton: new FloatingActionButton(
onPressed: () {
Navigator.of(context).pop();
},
child: new Icon(Icons.replay),
),
);
}
}
複製程式碼新路由繼承自StatelessWidget，介面很簡單，在頁面中間顯示一句"This is new route"。然後，修改main.dart的原始碼如下：
import 'package:flutter/material.dart';
import 'package:flutter_demo/SecondPage.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: '路由管理首頁'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new Text(
'點選浮動按鈕開啟新頁面',
),
),
floatingActionButton: new FloatingActionButton(
onPressed: () {
Navigator.push(
context, MaterialPageRoute(builder: (context) => SecondPage()));
},
child: new Icon(Icons.open_in_new),
),
);
}
}
複製程式碼執行上面的程式碼，當我們點選按鈕後，路由就會開啟一個新的路由頁面，如下圖：
MaterialPageRoute
MaterialPageRoute繼承自PageRoute類，PageRoute類是一個抽象類，表示佔有整個螢幕空間的一個模態路由頁面，它還定義了路由構建及切換時過渡動畫的相關介面及屬性。MaterialPageRoute 是Material元件庫的一個Widget，它可以針對不同平臺，實現與平臺頁面切換動畫風格一致的路由切換動畫，具體來說：
- 對於Android，當開啟新頁面時，新的頁面會從螢幕底部滑動到螢幕頂部；當關閉頁面時，當前頁面會從螢幕頂部滑動到螢幕底部後消失，同時上一個頁面會顯示到螢幕上。
- 對於iOS，當開啟頁面時，新的頁面會從螢幕右側邊緣一致滑動到螢幕左邊，直到新頁面全部顯示到螢幕上，而上一個頁面則會從當前螢幕滑動到螢幕左側而消失；當關閉頁面時，正好相反，當前頁面會從螢幕右側滑出，同時上一個頁面會從螢幕左側滑入。
我們使用MaterialPageRoute來完成路由跳轉時，MaterialPageRoute建構函式提供了幾個的，引數，格式如下：
MaterialPageRoute({
WidgetBuilder builder,
RouteSettings settings,
bool maintainState = true,
bool fullscreenDialog = false,
})
複製程式碼這些引數的具體含義如下：
- builder 是一個WidgetBuilder型別的回撥函式，它的作用是構建路由頁面的具體內容，返回值是一個widget。我們通常要實現此回撥，返回新路由的例項。
- settings 包含路由的配置資訊，如路由名稱、是否初始路由（首頁）。
- maintainState：預設情況下，當入棧一個新路由時，原來的路由仍然會被儲存在記憶體中，如果想在路由沒用的時候釋放其所佔用的所有資源，可以設定maintainState為false。
- fullscreenDialog表示新的路由頁面是否是一個全屏的模態對話方塊，在iOS中，如果fullscreenDialog為true，新頁面將會從螢幕底部滑入（而不是水平方向）。
Navigator
Navigator是Flutter應用開發中的一個路由管理的widget，它通過一個棧來管理一個路由widget集合。通常，當前螢幕顯示的頁面就是棧頂的路由。Navigator提供了一系列方法來管理路由棧，我們可以使用 push 和 pop 兩個操作來進行頁面的入棧和出棧。
push
將給定的路由入棧（即開啟新的頁面），返回值是一個Future物件，用以接收新路由出棧（即關閉）時的返回資料。
執行push 操作時，我們主要使用兩個方法：一個是直接 push 一個路由，另外一個是 pushNamed 一個命名路由地址。
push方式
下邊是 Navigator.push 的原始碼，入參的 Route 物件中有一個 RouteSettings 成員變數，我們可以在構造 Route 物件的時候將需要傳遞的引數放在 RouteSettings 中。
@optionalTypeArgs
static Future<T> push<T extends Object>(BuildContext context, Route<T> route) {
return Navigator.of(context).push(route);
}
複製程式碼如果涉及到傳遞引數，那麼我們可以將引數放在 SecondScreen 的建構函式中，也可以放在構造的 MaterialPageRoute 的 RouteSettings 中。
Navigator.push(
context,
new MaterialPageRoute(builder: (context) => new SecondScreen()),
).then((data){
//接受返回的引數
print(data.toString());
};
複製程式碼pushNamed方式
pushNamed方式的實現最終呼叫的也是 push 方法，這中方法直接暴露了引數 Object arguments ，原始碼如下：
@optionalTypeArgs
static Future<T> pushNamed<T extends Object>(
BuildContext context,
String routeName, {
Object arguments,
}) {
return Navigator.of(context).pushNamed<T>(routeName, arguments: arguments);
}
@optionalTypeArgs
Future<T> pushNamed<T extends Object>(
String routeName, {
Object arguments,
}) {
return push<T>(_routeNamed<T>(routeName, arguments: arguments));
}
複製程式碼使用pushNamed方式時，需要將路由註冊到路由表中，例如：
Navigator.of(context)
.pushNamed(
'/route1',
arguments: {
"name": 'hello'
}
).then((data){
//接受返回的引數
print(data.toString());
};
複製程式碼pop
pop操作將棧頂路由出棧，入參為一個 object 型別的物件，出參為當前頁面關閉時返回給上一個頁面的資料。
pop的原始碼如下：
@optionalTypeArgs
static bool pop<T extends Object>(BuildContext context, [ T result ]) {
return Navigator.of(context).pop<T>(result);
}
複製程式碼pop的使用非常簡單，例如：
Navigator.of(context).pop(""); //可以傳遞引數
複製程式碼兩個頁面之間跳轉，如果涉及到引數的傳遞，可以使用下面的方式：
Navigator.of(context).pushNamed('/route1', arguments: {"name": 'hello'});
複製程式碼獲取引數時，可以使用下面的方式：
class Page extends StatelessWidget{
String name;
@override
Widget build(BuildContext context) {
dynamic obj = ModalRoute.of(context).settings.arguments;
if (obj != null && isNotEmpty(obj["name"])) {
name = obj["name"];
}
return Material(
child: Center(
child: Text("this page name is ${name}"),
),
);
}
}
複製程式碼命名路由
所謂命名路由，就是給路由起一個名字，然後可以通過路由名字直接開啟新的路由。這為路由管理帶來了一種直觀、簡單的方式，這和 Android 中的 ARrouter 頁面跳轉框架所定義的 path 非常的類似。
路由名稱按慣例使用類似路徑的結構，應用程式的主頁路由預設為“/”，例如，'/ home' 表示 HomeScreen， '/ login' 表示 LoginScreen。
路由表
要想使用命名路由，我們必須先提供並註冊一個路由表（routing table），這樣應用程式才知道哪個名稱與哪個路由Widget對應。路由表的定義如下：
Map<String, WidgetBuilder> routes;
複製程式碼它是一個Map， key 為路由的名稱，是個字串；value是個builder回撥函式，用於生成相應的路由Widget。我們在通過路由名稱入棧新路由時，應用會根據路由名稱在路由表中找到對應的WidgetBuilder回撥函式，然後呼叫該回撥函式生成路由widget並返回。
例如，我們在建立 MaterialApp 的時候就有一個 routes 構造引數：
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
home: new MyHomePage(title: '應用程式首頁'),
routes: <String, WidgetBuilder> {
'/a': (BuildContext context) => new MyPage(title: 'A 頁面'),
'/b': (BuildContext context) => new MyPage(title: 'B 頁面'),
'/c': (BuildContext context) => new MyPage(title: 'C 頁面')
},
);
}
}
複製程式碼註冊路由表
Flutter的路由註冊方式比較簡單，我們回到之前“計數器”的示例，然後在MyApp類的build方法中找到MaterialApp，新增routes屬性，程式碼如下：
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
//註冊路由表
routes:{
"new_page":(context)=>NewRoute(),
} ,
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
複製程式碼這樣，使用routes的方式我們就完成了路由表的註冊。現在，我們就可以通過路由名稱來開啟新的路由。pushNamed跳轉的格式如下：
Future pushNamed(BuildContext context, String routeName,{Object arguments})
複製程式碼Navigator 除了pushNamed方法，還有pushReplacementNamed等其他管理命名路由的方法，讀者可以自行檢視API文件。接下來我們通過路由名來開啟新的路由頁，修改FlatButton的onPressed回撥程式碼：
onPressed: () {
Navigator.pushNamed(context, "new_page");
//Navigator.push(context,
// new MaterialPageRoute(builder: (context) {
// return new NewRoute();
//}));
},
複製程式碼命名路由傳參
在Flutter最初的版本中，命名路由是不能進行傳遞引數的，後來才支援了引數。例如，下面展示命名路由如何傳遞並獲取路由引數，首先，註冊一個路由：
routes:{
"new_page":(context)=>EchoRoute(),
} ,
複製程式碼然後，在路由頁通過RouteSetting物件獲取路由引數，例如：
class EchoRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
//獲取路由引數
var args=ModalRoute.of(context).settings.arguments
//...省略無關程式碼
}
}
複製程式碼然後，在開啟路由時傳遞引數：
Navigator.of(context).pushNamed("new_page", arguments: "hi");
複製程式碼