什么是路由route
1、熟悉前端的朋友知道，這跟web開發中單頁應用的Route概念意義是相同的；
2、Route在Android中通常指一個Activity，在iOS中指一個ViewController；
3、路由入棧(push)操作對應打開一個新頁面，路由出棧(pop)操作對應頁面關閉操作；比如android中就是startActivity和finish；
4、路由管理主要是指如何來管理路由棧。
Navigator
Navigator是一個路由管理的組件，它提供了打開和退出路由頁方法。Navigator通過一個棧來管理活動路由集合。
常用的兩個方法：
Future push(BuildContext context, Route route)
將給定的路由入棧（即打開新的頁面），返回值是一個Future對象，用以接收新路由出棧（即關閉）時的返回數據。
@optionalTypeArgs
static Future<T> push<T extends Object>(BuildContext context, Route<T> route) {
return Navigator.of(context).push(route);
}
bool pop(BuildContext context, [ result ])
將棧頂路由出棧，result為頁面關閉時返回給上一個頁面的數據。
@optionalTypeArgs
static bool pop<T extends Object>(BuildContext context, [ T result ]) {
return Navigator.of(context).pop<T>(result);
}
MaterialPageRoute
MaterialPageRoute 是Material組件庫提供的組件，它可以針對不同平臺，實現與平臺頁面切換動畫風格一致的路由切換動畫：
MaterialPageRoute({
@required this.builder, //是一個WidgetBuilder類型的回調函數，返回新路由的實例。
RouteSettings settings, //包含路由的配置信息，如路由名稱、是否初始路由（首頁）。
this.maintainState = true, //是否釋放所占用的所有資源
bool fullscreenDialog = false, //新的路由頁面是否是一個全屏的模態對話框
})
Navigator+MaterialPageRoute
點擊關于跳轉到About頁面
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => (About())));
}
命名路由
所謂“命名路由”（Named Route）即有名字的路由，我們可以先給路由起一個名字，然后就可以通過路由名字直接打開新的路由了，這為路由管理帶來了一種直觀、簡單的方式。
注冊路由表
Map<String, WidgetBuilder> routes;
它是一個Map，key為路由的名字，是個字符串；value是個builder回調函數，用于生成相應的路由widget。我們在通過路由名字打開新路由時，應用會根據路由名字在路由表中查找到對應的WidgetBuilder回調函數，然后調用該回調函數生成路由widget并返回。
可以理解成
www.xxx.com/ 進入首頁
www.xxx.com/about 進入關于我們頁面
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
initialRoute: "/",
theme: ThemeData(primarySwatch: Colors.green, primaryColor: Colors.white),//設置App主題
routes: {
"/":(context)=>MyHomePage(),
"/about":(context)=>About()
},
);
}
}
通過路由名打開新路由頁
@optionalTypeArgs
static Future<T> pushNamed<T extends Object>(
BuildContext context, //上下文
String routeName, { //路由名
Object arguments, //頁面傳參
}) {
return Navigator.of(context).pushNamed<T>(routeName, arguments: arguments);
}
通過routeName跳轉
onTap: () {
Navigator.pushNamed(context, "/about");
//Navigator.push(context, MaterialPageRoute(builder: (context) => (About())));
},
路由參數傳遞
普通push傳遞參數
class OtherGank extends StatelessWidget {
final String content;
OtherGank({Key key, this.content}) : super(key: key);
@override
Widget build(BuildContext context) {
var args=ModalRoute.of(context).settings.arguments;
return Scaffold(
appBar: AppBar(
title: Text("其他Gank項目"),
),
body: Center(child: Text(args==null?content:args)),
);
}
}
Navigator.push(context, MaterialPageRoute(builder: (context) => (OtherGank(content: "這是route傳遞的參數",))));
命名路由參數傳遞
傳遞
Navigator.pushNamed(context, "/other",arguments: "這是route傳遞的參數");
接收
var args=ModalRoute.of(context).settings.arguments;
路由返回值
接收返回參數
onTap: () async {
var res = await Navigator.pushNamed(context, "/other",arguments: "這是route傳遞的參數");
LogUtils.log(res);
},
傳遞返回參數
body: Center(child: RaisedButton(
onPressed: (){
Navigator.pop(context,"我要帶返回值回去~");
},
child: Text("帶參數回去"),
)),
點擊button返回的就是帶了參數的，點擊AppBar的返回按鈕則為null。也就是說點擊AppBar的返回按鈕執行的是
Navigator.pop(context)
路由鉤子
當使用命名路由跳轉時在跳轉之前可以做統一的登錄判斷權限判斷之類的事情。
MaterialApp(
... //省略無關代碼
onGenerateRoute:(RouteSettings settings){
return MaterialPageRoute(builder: (context){
String routeName = settings.name;
// 如果訪問的路由頁需要登錄，但當前未登錄，則直接返回登錄頁路由，
// 引導用戶登錄；其它情況則正常打開路由。
}
);
}
);
- 注意，onGenerateRoute只會對命名路由生效。
更詳細的資料
完整代碼
https://github.com/leiyun1993/FlutterDemo-GankIO
ps：以上完整代碼為Demo代碼。本文中的代碼只為了測試路由功能，可能在項目中無法找到完全一樣的代碼！
