场景：从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(),
// 先加入跳转的路由 实际开发中最好将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;
