界面跳转
普通路由
不携值
Navigator.of(context).push(
MaterialPageRoute(builder: (BuildContext context){
//此处放回被跳转的界面
return SearchPage();
}));
携值
在被跳转界面的构造方法中添加对应参数,实现传值效果
Navigator.of(context).push(
MaterialPageRoute(builder: (BuildContext context){
//此处放回被跳转的界面
return SearchPage(searchContent: "一个搜索内容");
}));
命名路由
实现步骤
- 在main文件中添加路由表单
final routes = {
//无需传递参数的界面
"/search": (context,{arguments}) => SearchPage(),
//需要传递参数的界面(设置默认参数,可不传),其中的arguments为Objects类型,增加了传值的灵活性
"/form": (context,{arguments}) => FormPage(arguments: arguments,),
};
- 为 MaterialApp 添加 onGenerateRoute 参数
//固定写法,用于命名路由的传值(此参数用于回调时生成MaterialPageRoute参数)
onGenerateRoute: (RouteSettings settings) {
//通过pushName实现跳转时传递的 name和arguments被封装成了RouteSettings对象
final String? name = settings.name;
if (name != null && name.isNotEmpty) {
//从自定义的routes中查询
final Function? pageContentBuilder = routes[name];
if (pageContentBuilder != null) {
//查看是否存在传值,从而生成不同的MaterialPageRoute对象并返回
if (settings.arguments != null) {
final Route route = MaterialPageRoute(
builder: (context) => pageContentBuilder(context,
arguments: settings.arguments));
return route;
} else {
final Route route = MaterialPageRoute(
builder: (context) => pageContentBuilder(context));
return route;
}
}
}
},
- 执行携值跳转
children: [
Text("命名路由跳转"),
ElevatedButton(
onPressed: () {
Navigator.of(context).pushNamed("/form");
},
child: Text("跳转到表单界面")),
ElevatedButton(
onPressed: () {
Navigator.of(context).pushNamed("/form",arguments: {
"content":"表单内容"
});
},
child: Text("携值跳转到表单界面"))
],
被跳转的界面处理
class FormPage extends StatefulWidget {
final arguments;
FormPage({this.arguments});
@override
_FormPageState createState() => _FormPageState(arguments: arguments);
}
class _FormPageState extends State<FormPage> {
final arguments;
String content = "";
_FormPageState({this.arguments});
@override
void initState() {
// TODO: implement initState
super.initState();
if(this.arguments!=null){
content = this.arguments["content"];
print("接收到的arguments: $arguments");
}
}
@override
Widget build(BuildContext context) {
print("接收到的content: $content");
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text("表单"),
),
body: Text("$content"),
floatingActionButton: FloatingActionButton(
onPressed: () {
//返回上一页
Navigator.of(context).pop();
},
child: Text("返回"),
),
);
}
}
返回上一级界面
返回上一级
Navigator.of(context).pop();
携值返回上一级
//跳转时通过.then来接收返回参数
Navigator.of(context).pushNamed("跳转界面",
arguments: {"content": "表单内容"}).then((value) {
print("返回的值: $value");
});
...
//返回时携带参数
Navigator.pop(context,"携带参数");
路由替换
由当前页加载跳转页,不生成新的界面
Navigator.of(context).pushReplacementNamed("跳转页");
返回到根界面
将所有路由置空并重新创建根界面
Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (BuildContext context) {
return MyStateApp();
}),
//一直清空直至返回true,此处固定返回false,会清空全部路由
(route) => false);
返回到指定界面
Navigator.popUntil(context, ModalRoute.withName('指定界面'));