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当中最基础的页面跳转,以及页面之间数据交互讲解完了,小伙伴可以愉快的去做各种页面交互啦😊😊😊。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持。

实例源码地址

时间: 2019-08-12

Flutter路由的跳转、动画和传参详解(最简单)

路由 做Android/iOS原生开发的时候,要打开一个新的页面,你得知道你的目标页面对象,然后初始化一个Intent或者ViewController,再通过startActivity或者pushViewController来推出一个新的页面,不能跟web一样,直接丢一个链接地址就跳转到新的页面.当然,可以自己去加一个中间层来实现这些功能. Flutter里面是原生支持路由的.Flutter的framework提供了路由跳转的实现.我们可以直接使用这些功能. Flutter路由介绍 Flutte

微信小程序 页面跳转传参详解

微信小程序 页面跳转传参,做微信小程序必定会用的这样的功能,这里就记录下本人学习实现代码资料. 刚接触微信小程序,多里面的语法和属性还不怎么聊解,如有不多的地方希望各位大神多多指教.今天来说下微信小程序怎么跳转和传参,话不多说直接上代码. 实现的功能是给列表增加点击功能传参到下一页: 代码如下: <import src="../WXtemplate/headerTemplate.wxml"/> <view> <!--滚动图--> <view&g

Python中字符串的修改及传参详解

发现问题 最近在面试的时候遇到一个题目,选择用JavaScript或者Python实现字符串反转,我选择了Python,然后写出了代码(错误的): #!/usr/bin/env python #-*-coding:utf-8-*- __author__ = 'ZhangHe' def reverse(s): l = 0 r = len(s) - 1 while l < r: s[l],s[r] = s[r],s[l] l += 1 r -= 1 return s 然后面试官问了两个问题: (1)

通过字节码看java中this的隐式传参详解

前言 从字节码看java中 this 隐式传参具体体现(和python中的self如出一辙,但是比python中藏得更深),也发现了 static 与 非 static 方法的区别所在! static与非static方法都是存储java的方法区.在static 方法中,没有this引用,因此无法使用当前类中所定义的变量,而非static方法则会默认传入this. 概述 this关键字,是一个隐式参数,另外一个隐式参数是super. this用于方法里面,用于方法外面无意义. this关键字一般用

python中函数传参详解

一.参数传入规则 可变参数允许传入0个或任意个参数,在函数调用时自动组装成一个tuple: 关键字参数允许传入0个或任意个参数,在函数调用时自动组装成一个dict: 1. 传入可变参数: def calc(*numbers): sum = 0 for n in numbers: sum = sum + n * n return sum 以上定义函数,使用如下: 传入多个参数, calc(1, 2, 3, 4) 30 #函数返回值 传入一个列表, nums = [1, 2, 3] calc(*nu

Android 属性动画ValueAnimator与插值器详解

Android 属性动画ValueAnimator与插值器详解 一.ValueAnimator详解: ValueAnimator是整个动画的核心,ObjectAnimator即是继承自ValueAnimator来实现. ValueAnimator更像是一个数值发生器,用来产生具有一定规律的数字,从而让调动者来控制动画的实现过程. 1.ValueAnimator的使用: ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 100); val

微信小程序 页面跳转事件绑定的实例详解

微信小程序 页面跳转事件绑定的实例详解 什么是事件 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 id, dataset, touches. 在组件中绑定一个事件处理函数. 如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数 <view bindtap="view"> <text bindtap

基于Struts文件上传(FormFile)详解

Struts中FormFile用于文件进行上传 1.在jsp文件中进行定义 <form action="/StrutsFileUpAndDown/register.do" method="post" enctype="multipart/form-data"> 名字:<input type="text" name="name" /> 头像:<input type="f

Android属性动画之ValueAnimator代码详解

属性动画通过改变一个对象的属性值来进行动画,属性动画包含了以下几个特性: 1.持续时间(Duration) 主要用来定义动画的持续时间,默认值为300ms. 2.时间插值器(Time interpolation) 指定时间变化的百分比,就是当前流逝时间除以指定的持续时间,这个可以自定义,继承Interpolator,重写getInterpolation方法. 3.重复次数和行为(Repeat count and behavior) 指定动画的执行次数和动画的重复模式 4.动画集(Animator

微信小程序 跳转传参数与传对象详解及实例代码

微信小程序 跳转传参数 传对象 微信小程序跳转传参 一般都是传字符串到下一页,如果要想传对象怎么办呢? 我的解决办法是先将对象转换为json字符串然后到下个页面将json字符串,再转化为对象.如下: let str=JSON.stringify(e.currentTarget.dataset.item); wx.navigateTo({ url: '../toMybaby/babyDetail/babyDetail?jsonStr='+str, success: function (res) {