Flutter路由跳转及参数传递

image

本文要介绍的知识点

  • 用路由推出一个新页面
  • 打开新页面时,传入参数
  • 参数的回传

路由

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

Flutter路由介绍

Flutter里面有路由支持所有的路由场景,push、pop页面,页面间的参数传递等等。flutter里面的路由可以分成两种,一种是直接注册,不能传递参数。另一种要自己构造实例,可以传递参数。我们暂时把它们规为静态路由和动态路由。

静态路由的注册

在新建一个MD风格的App的时候,可以传入一个routes参数来定义路由。但是这里定义的路由是静态的,它不可以向下一个页面传递参数。

return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter实例'),
      routes: <String, WidgetBuilder> {
        // 这里可以定义静态路由,不能传递参数
        '/router/second': (_) => new SecondPage(),
        '/router/home': (_) => new RouterHomePage(),
      },
    );

静态路由的使用

push一个新页面,pushNamed方法是有一个Future的返回值的,所以静态路由也是可以接收下一个页面的返回值的。但是不能向下一个页面传递参数。

Navigator.of(context).pushNamed('/router/second');

// 带返回值
Navigator.of(context).pushNamed('/router/second').then((value) {
                    // dialog显示返回值
                    _showDialog(context, value);
                  })

pop回上一个页面

Navigator.of(context).pop('这个是要返回给上一个页面的数据');

动态路由的使用

当需要向下一个页面传递参数时,要用到所谓的动态路由,自己生成页面对象,所以可以传递自己想要的参数。

Navigator.of(context).push(new MaterialPageRoute(builder: (_) {
                    return new SecondPage(title: '路由是个好东西,要进一步封装');
                  }));

也可以用PageRouterBuilder来自定义打开动画

Navigator.of(context).push(new PageRouteBuilder(pageBuilder:
            (BuildContext context, Animation<double> animation,
                Animation<double> secondaryAnimation) {
          return new RefreshIndicatorDemo();
        }, transitionsBuilder: (
          BuildContext context,
          Animation<double> animation,
          Animation<double> secondaryAnimation,
          Widget child,
        ) {
          // 添加一个平移动画
          return BRouter.createTransition(animation, child);
        }));

平移的变换

/// 创建一个平移变换
  /// 跳转过去查看源代码,可以看到有各种各样定义好的变换
  static SlideTransition createTransition(
      Animation<double> animation, Widget child) {
    return new SlideTransition(
      position: new Tween<Offset>(
        begin: const Offset(1.0, 0.0),
        end: const Offset(0.0, 0.0),
      ).animate(animation),
      child: child, // child is the value returned by pageBuilder
    );
  }

关于学习

flutter的学习文章都整理在这个github仓库

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端知识铺

前端路由简介以及vue-router实现原理

简单来说路由就是用来跟后端服务器进行交互的一种方式,通过不同的路径,来请求不同的资源,请求不同的页面是路由的其中一种功能。

41860
来自专栏進无尽的文章

扒虫篇-Debug几个实用的方法

Bebug调试程序是开发中最常见的问题,对于一些简单有效的调试技巧的了解是很有必要的。这篇文章就列举Debug中用到的一些简单的技巧。

25710
来自专栏C语言及其他语言

C语言逆向系列之破解一个简单的C语言程序

以下正文 本节教程将教大家如何去逆向分析和破解一个简单的C程序,需要大家熟悉基本的C语言语法,用到工具有:VC6、IDAPro、OD、UE等工具。 下面我们开...

53250
来自专栏Android-薛之涛

Android-App性能优化

上一篇我们讲了java的引用机制,今天我们来一下和它有关的app性能优化(其实也不是很大)。

61840
来自专栏不想当开发的产品不是好测试

常用业务接口界面化 in python flask

背景: 对于业务测试来说,有一些基础业务接口是需要经常调用的,如根据userId查询某人的信息,修改某人的xx属性,一般的接口都有验签(或者说token)机制,...

264100
来自专栏Android开发指南

eclipse使用和快捷键

44090
来自专栏Google Dart

AngularDart4.0 英雄之旅-教程-02启动应用

码云项目页:https://gitee.com/scooplolwiki/toh-0

9220
来自专栏陈树义

Wins批处理基本语法

在Windows平台下,批处理可以和Wins系统很好地结合,处理一些简单的任务,比如:重复删除某种类型的文件;开机执行一些特定的命令等。 本文主要介绍批处理的基...

386100
来自专栏Albert陈凯

2018-09-07 wakatime Intellij IDEA 免费记录Code时间分配的插件jetbrains-wakatimeFor more general troubleshooting

插件源码地址Source Code: 有动画 https://github.com/wakatime/jetbrains-wakatime

28520
来自专栏小程序容器

OpenApplus小程序容器

OpenApp+ (https://www.openapplus.com)一个小程序容器,配置简单、功能完善、界面流畅、开箱即用!使用OpenApp+可以快速扩...

62890

扫码关注云+社区

领取腾讯云代金券