Flutter学习之Route跳转及数据传递

jiezi

5 年前

我们知道移动应用页面跳转是非常重要的一部分，几乎我们的程序和用户打交道的就是页面，或者叫 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);

基于上面的两种跳转方式，对应有两种

通过 Navigator.push()跳转，将参数传到 B 页面的构造方法中，代码如下：

// A 页面跳转, 直接将参数传到 B 页面的构造方法里面
    Navigator.push(context,
               MaterialPageRoute(builder:(context) => BRouter(string)
))
//BRouter 构造方法
  class BRouter extends StatelessWidget{
    final String str;
    BRouter(this.str);
  }

通过 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 当中最基础的页面跳转，以及页面之间数据交互讲解完了，小伙伴可以愉快的去做各种页面交互啦????????????。
实例源码地址

Flutter学习之Route跳转及数据传递

前言

正文

页面跳转

页面跳转并携带数据

返回上一个页面并返回数据

总结