場景：從Home頁跳轉到Detail頁澜汤，并將Home頁的一個數據傳到Detail頁進行顯示蚜迅，Detail在返回時也攜帶數據返回給Home頁
一、flutter中通過push俊抵、pop來進行頁面之間的跳轉和返回
Home.dart Home界面的跳轉代碼
onPressed: (){
// 這里的代碼返回的是Future 所以直接在后面可以接上then谁不，也可以使用result.then((value){})
Future result = Navigator.of(context).push(MaterialPageRoute(
builder: (content){
return DetailPage(detailMessage: '從HomePage跳轉過來的',);
}
)).then((value){
// 這里的方法在詳情頁返回時回調，value就是Detail頁面返回時攜帶的數據
message = value;
setState(() {
});
});
},
Detail.dart Detail頁面返回按鈕代碼
構造方法
final String detailMessage;
DetailPage({this.detailMessage});
返回按鈕點擊代碼
onPressed: (){
// 返回的時候攜帶數據回去
Navigator.of(context).pop('從DetailPage返回回來的數據');
// 傳的數據是泛型徽诲，所以也可以傳對象
// Navigator.of(context).pop({'username':'name','passwd':'admin'});
},
二刹帕、flutter中通過pushNamed、pop來進行頁面之間的跳轉和返回
Home.dart Home界面的跳轉代碼
在Home頁配置好路由
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
// 先加入跳轉的路由 實際開發(fā)中最好將routes抽取到一個類中
routes: <String, WidgetBuilder>{
"/Detail":(context){
return DetailPage();
}
},
);
}
}
通過pushNamed跳轉的代碼
onPressed: (){
Future result = Navigator.of(context).pushNamed('/Detail',arguments: '通過pushName從HomePage跳轉過來的');
result.then((value){
// value就是Detail返回時攜帶的數據
});
},
Detail.dart Detail界面返回按鈕代碼
詳情頁接收Home頁pushNamed跳轉時攜帶的數據
final message = ModalRoute.of(context).settings.arguments;
詳情頁返回按鈕點擊代碼
onPressed: (){
Navigator.of(context).pop('從DetailPage返回回來的數據');
}
上面都是跳轉到無參構造器的界面中谎替，如果需要跳轉到有參構造器的widget中偷溺，并傳入參數，這時就需要用到回調函數onGenerateRoute
return MaterialApp(
// 該回調函數可以自己生成路由
onGenerateRoute: (settings){
// 判斷路由名稱并生成路由
if(settings.name == "other"){
// 需要返回一個Route钱贯，Route是一個抽象類挫掏，所以需要找其子類，一般使用MaterialPageRoute
return MaterialPageRoute(
builder: (context){
// argument就是pushnamed時傳入參數
final String argument = settings.arguments;
// 獲取到參數后就可以傳入有參構造器中
return WPOther(argument);
}
);
}
// 如果路由名稱不是other喷舀，則返回null
return null;
},
)
跳轉的代碼
//這里的arguments參數就是需要傳入到構造器中的參數砍濒，在上面onGenerateRoute回調中就可以拿到該參數進行初始化
Navigator.of(context).pushNamed("other",arguments: "other-arguments");
如果跳轉時傳入的路由名稱是隨便填的，這樣會導致程序奔潰硫麻，所以我們可以用onUnknownRoute回調函數返回一個錯誤提示的界面來防止程序奔潰
return MaterialApp(
// 當跳轉的路由不存在時會走這個回調爸邢，可以讓他跳轉到錯誤界面給出提示，防止奔潰
onUnknownRoute: (settings){
return MaterialPageRoute(
builder: (context){
return WPError(settings.arguments);
}
);
},
);
總結：
1拿愧、push跳轉：直接使用下面的代碼杠河，將要跳轉的界面DetailPage加入到MaterialPageRoute中，如果需要傳參，就在DetailPage中加入對應的構造方法券敌，直接進行傳參
Navigator.of(context).push(MaterialPageRoute(
builder: (content){
return DetailPage(detailMessage: '從HomePage跳轉過來的',);
}
))
2唾戚、pushNamed跳轉：MaterialApp中有個routes屬性，是一個Map<String, WidgetBuilder>待诅，WidgetBuilder是一個函數
final Map<String, WidgetBuilder> routes;
typedef WidgetBuilder = Widget Function(BuildContext context);
routes: <String, WidgetBuilder>{
跳轉的路由名稱"/Detail"
"/Detail":(context){
返回需要跳轉的widget
return DetailPage();
}
},
跳轉時可以傳入參數 arguments
Navigator.of(context).pushNamed('/Detail',arguments: '通過pushName從HomePage跳轉過來的');
接收參數代碼
final message = ModalRoute.of(context).settings.arguments;
