Flutter学习教程之Route跳转以及数据传递
前言
我们知道移动应用页面跳转是非常重要的一部分，几乎我们的程序和用户打交道的就是页面，或者叫view，我们android基本都是activity和fragment。而且flutter当中叫做route，它就是与用户打交道的页面。本文详细探索一下flutter当中页面之间是怎么交互的。
route类似android中activity，所以flutter中的页面跳转类似android中activity之间跳转，intent携带传递的数据。
正文
页面跳转
我们现在看看flutter中是怎么进行页面交互的，也就是页面之间的跳转。
从上一个页面a跳转下一个页面b，有两种方式：
- 通过navigator.push()跳转
- 通过navigator.pushname()跳转
返回上一个页面：navigator.pop();
提示：通过navigator.pushnamed()跳转的，记住一定要注册routename！！！
提示：通过navigator.pushnamed()跳转的，记住一定要注册routename！！！
提示：通过navigator.pushnamed()跳转的，记住一定要注册routename！！！
重要的事情说三遍????????????！！！
代码如下：
//第一种：通过navigator.push()跳转，类似android中的startactivity(),指定activity类名这种方式;
navigator.push(context, materialpageroute(builder: (context) {
return thirdroute();
}));
//第二种方式：通过navigator.pushname()，类似android中的startactivity(),指定class全路径这种方式；
//先在materialapp里面注册route
routes: { secondroute.routename: (context) => secondroute(),}
navigator.pushnamed(context, secondroute.routename);
//返回上一个页面，类似activity的finish()；
navigator.pop(context);
页面跳转并携带数据
基于上面的两种跳转方式，对应有两种
1、通过navigator.push()跳转，将参数传到b页面的构造方法中，代码如下：
//a页面跳转,直接将参数传到b页面的构造方法里面
navigator.push(context,
materialpageroute(
builder:(context) => brouter(string)
))
//brouter构造方法
class brouter extends statelesswidget{
final string str;
brouter(this.str);
}
2、通过navigator.pushnamed()跳转，使用modalroute.of()或者materialapp（cupertinoapp）构造器中的ongeneraterouter()获取参数，建议使用modalrouter.of()。代码如下：
//a页面跳转,arguments就是需要传递的数据，这里的arguments是一个可需参数
navigator.pushname(context,routername,arguments);
//b页面提取参数,传的是什么类型，就用什么类型接值，这里用string演示
//第一种用modalrouter接值
string arg = modalrouter.of(context).setting.arguments;
//第二种在ongeneraterouter里面接值
materialapp(
ongenerateroute: (settings) {
// 先根据setting里面的name判断是哪个router
if (settings.name == passargumentsscreen.routename) {
// 然后取出setting里面的arguments
final screenarguments args = settings.arguments;
// 然后再通过具体router的构造方法穿过，类似上面的第一种方式接值方式
return materialpageroute(
builder: (context) {
return passargumentsscreen(
title: args.title,
);
},
);
}
},
);
返回上一个页面并返回数据
从当前页面b返回上一个页面a回传数据：
一般都是点击b页面某个控件，关闭当前页面，把需要的数据回传,类似android中的setresult(result.ok,intent)
//当前页面b中的按钮
raisedbutton(
onpressed: () {
// 点击button，关闭页面，回到上一个页面，回传数据
navigator.pop(context, '回传的数据');
// 这个方法通过方法名也能看出来，关闭当前页面，跳转到具体的页面，也可以回传数据。
// tips：参数加[]说明是非必传参数
navigator.popandpushnamed(context, routename，[t result])
},
child: text('返回'),
);
//回到上一个页面a，需要接值的话，在点击去下一个页面的需要使用到async延迟接收
//当buildcontext在scaffold之前时，调用scaffold.of(context)会报错。所以这里通过builder widget来解决
builder(builder: (context){
return raisedbutton(
onpressed: () async {
//2: 通过navigator.push方式携带跳转
string str = "我是第一个页面的数据";
//疑问为什么只能用var接值，不能用string？
var result = await navigator.pushnamed(context, secondroute.routename,
arguments: str);
if (result != null) {
//通过snackbar将接收到的数据show出来。
scaffold.of(context).showsnackbar(snackbar(
content: text(result),
backgroundcolor: colors.blue,
duration: duration(milliseconds: 500),
));
}
},
child: text("携带数据跳转"),
);
}),
下面我们来看看最终的演示效果：
总结
这样我们就把flutter当中最基础的页面跳转，以及页面之间数据交互讲解完了，小伙伴可以愉快的去做各种页面交互啦????????????。
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。