小菜最近在抽时间学习 Flutter,从零开始,一步一步走的都很艰难,前几天搭了一个基本的【登录】页面,现在学习下一步,页面之间的跳转;今天小菜整理一下 Flutter 测试过程中常用的页面跳转方式。
最权威的资料永远是 Flutter 官网,很精华,只可惜小菜英语水平太次,读起来有点吃力。但小菜了解到,Flutter 中跳转一定要用到 Navigator,就像是 Android 中的 Intent;小菜理解为就是一个栈,进进出出跟 Android 是很类似的,而 Flutter 也很直接,关键词就是 push 和 pop,小菜分别从这两个关键词来测试 Flutter 页面间的跳转。
push 入栈
1. 静态注册跳转 Using named navigator routes
使用静态注册方式时,需要在主页面的方法中添加 rount,小菜感觉有点像 AndroidManifest 中 intnt-filter 中静态注册;而 Flutter 中的 => 方法很像 Kotlin 中的 -> 减少代码行。
routes: {
'forgetPwdRoute': (BuildContext context) => new ForgetPwdPage(),
'homeRoute': (BuildContext context) => new HomePage(),
},
1.1 pushNamed 方法单纯跳转页面
Navigator.pushNamed 包含两个参数,第一个小菜理解为上下文环境,第二个参数为静态注册的对应的页面名称;如:
onTap: () {
Navigator.pushNamed(context, "forgetPwdRoute");
},
1.2 pushNamedAndRemoveUntil 跳转页面并销毁当前页面
Navigator.pushNamedAndRemoveUntil 包含三个参数,第一个小菜理解为上下文环境,第二个参数为静态注册的对应的页面名称,第三个参数为跳转后的操作,route == null 为销毁当前页面;如:
onPressed: () {
Navigator.pushNamedAndRemoveUntil(context, "homeRoute", (route) => route == null);
}
Tips: 如果在 HomePage 页面中调用 Navigator.pop(context); 会出现半个黑屏情况,所以小菜并不建议这种方式销毁页面,但是点击返回按钮是正常的。
2. 动态注册跳转
2.1 push 方法单纯跳转页面
Navigator.push 向下个页面跳转时,可以传递参数,自己生成页面对象;如:
onPressed: () {
Navigator.push<Object>(context,
new MaterialPageRoute(
builder: (BuildContext context) {
return new HomePage();
},
),
);
}
2.2 push 方法单纯跳转页面并传递参数
onPressed: () {
Navigator.push<String>(
context,
new MaterialPageRoute(
builder: (BuildContext context) {
return new ForgetPwdPage(pwd: "123456");
},
),
);
}
2.3 pushAndRemoveUntil 跳转页面并销毁当前页面
Navigator.pushAndRemoveUntil 向下个页面跳转时,多传一个参数即跳转后的操作;如:
Navigator.pushAndRemoveUntil(context,
new MaterialPageRoute(
builder: (BuildContext context) {
return new HomePage();
},
), (route) => route == null);
pop 出栈
1. pop 销毁当前页面
Navigator.pop 可以有一个参数或两个参数,如果只有一个参数,为上下文环境;如果两个参数,第二个参数为返回值内容,可以为多种类型。
onPressed: () {
Navigator.pop(context);
// Navigator.pop(context, ['a,b,c']);
// Navigator.pop(context, '这是 HomePage 页');
},
2. popAndPushNamed 销毁当前页面并跳转指向新的页面
Navigator.popAndPushNamed 第一个参数为上下文环境,第二个参数为静态注册的跳转页面名称;如:
onPressed: () {
Navigator.popAndPushNamed(context, 'forgetPwdRoute');
}
Tips: 小菜建议在使用返回值时,注意上一个页面是否已经销毁,否则会报异常。
then 返回值
有了页面跳转,就需要传递参数和接收返回内容,当跳转后的页面设置 Navigator.pop 设置返回值时,用 then 关键词可以接收,测试如下:
// MyApp()
onPressed: () {
// Navigator.pushNamed(context, 'homeRoute').then((Object result) {}
Navigator.push<Object>(context, new MaterialPageRoute(
builder: (BuildContext context) {
return new HomePage();
})).then((Object result) {
showDialog(
context: context,
builder: (BuildContext context) {
String str = result.toString();
return new AlertDialog(
content: new Text("您返回的内容为:$str"),
);
},
);
});
}
// HomePage()
onPressed: () {
Navigator.pop(context, ['a,b,c']);
}
主要源码
跳转页面:
onPressed: () {
// 按 name 方式跳转页面
// Navigator.pushNamed(context, 'homeRoute');
// 按 name 方式跳转页面,并接收返回值
// Navigator.pushNamed(context, 'homeRoute').then((Object result) {
// showDialog(
// context: context,
// builder: (BuildContext context) {
// String str = result.toString();
// return new AlertDialog(
// content: new Text("您返回的内容为:$str"),
// );
// },
// );
// });
// 按 name 方式跳转页面,并销毁当前页面
// Navigator.pushNamedAndRemoveUntil(
// context, "homeRoute", (route) => route == null);
// 直接 push 方式跳转页面
// Navigator.push<Object>(
// context,
// new MaterialPageRoute(
// builder: (BuildContext context) {
// return new HomePage();
// },
// ),
// );
// 直接 push 方式跳转页面,并接收返回内容
Navigator.push<Object>(context, new MaterialPageRoute(
builder: (BuildContext context) {
return new HomePage();
})).then((Object result) {
showDialog(
context: context,
builder: (BuildContext context) {
String str = result.toString();
return new AlertDialog(
content: new Text("您返回的内容为:$str"),
);
},
);
});
// 直接 push 方式跳转页面,并销毁当前页面
// Navigator.pushAndRemoveUntil(context,
// new MaterialPageRoute(
// builder: (BuildContext context) {
// return new HomePage();
// },
// ), (route) => route == null);
}
跳转页面并传参
onTap: () {
// 单纯跳转页面
// Navigator.pushNamed(context, "forgetPwdRoute");
// 传递参数
Navigator.push<String>(
context,
new MaterialPageRoute(
builder: (BuildContext context) {
return new ForgetPwdPage(pwd: "123456");
},
),
);
},
销毁页面
onPressed: () {
// pop 一个参数,销毁当前页面
// Navigator.pop(context);
// pop 两个参数,返回一个数组
// Navigator.pop(context, ['a,b,c']);
// pop 两个参数,返回一个字符串
Navigator.pop(context, 'HomePage');
// popAndPushNamed 销毁当前页面并跳转新的页面
// Navigator.popAndPushNamed(context, 'forgetPwdRoute');
},
小菜刚接触 Flutter 时间不长,还有很多不清楚和不理解的地方,如果又不对的地方还希望多多指出。以下是小菜公众号,欢迎闲来吐槽~