Route
push 一個新界面
Navigator.push(
context, MaterialPageRoute(builder: (context) => HomePage()));
},
pop出去
Navigator.of(context).pop();
MaterialPageRoute
MaterialPageRoute繼承自PageRoute類,PageRoute類是一個抽象類,表示占有整個屏幕空間的一個模態路由頁面,它還定義了路由構建及切換時過渡動畫的相關接口及屬性。
MaterialPageRoute({
WidgetBuilder builder,//是一個WidgetBuilder類型的回調函數,它的作用是構建路由頁面的具體內容,返回值是一個widget。我們通常要實現此回調,返回新路由的實例
RouteSettings settings,//settings 包含路由的配置信息,如路由名稱、是否初始路由(首頁)
bool maintainState = true,//默認情況下,當入棧一個新路由時,原來的路由仍然會被保存在內存中,如果想在路由沒用的時候釋放其所占用的所有資源,可以設置maintainState為false 當下個界面沒有下級頁面時 可使用false
bool fullscreenDialog = false,//表示新的路由頁面是否是一個全屏的模態對話框,在iOS中,如果fullscreenDialog為true,新頁面將會從屏幕底部滑入(而不是水平方向)。
})
push
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 ,源碼如下:
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 類型的對象,出參為當前頁面關閉時返回給上一個頁面的數據。
static bool pop<T extends Object>(BuildContext context, [ T result ]) {
return Navigator.of(context).pop<T>(result);
}
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");
文章來源:https://zhuanlan.zhihu.com/p/76496801?from_voters_page=true