flutter图片点击跳转_Flutter 09: 图解页面小跳转 (一)-阿里云开发者社区

小菜最近在抽时间学习 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(context,

new MaterialPageRoute(

builder: (BuildContext context) {

return new HomePage();

},

),

);

}

2.2 push 方法单纯跳转页面并传递参数

onPressed: () {

Navigator.push(

context,

new MaterialPageRoute(

builder: (BuildContext context) {

return new ForgetPwdPage(pwd: "123456");

},

),

);

}

2.3 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(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(

// context,

// new MaterialPageRoute(

// builder: (BuildContext context) {

// return new HomePage();

// },

// ),

// );

// 直接 push 方式跳转页面，并接收返回内容

Navigator.push(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(

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 时间不长，还有很多不清楚和不理解的地方，如果又不对的地方还希望多多指出。以下是小菜公众号，欢迎闲来吐槽～

公众号