本文要介绍的知识点

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

路由

做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路由跳转及参数传递的更多相关文章

  1. Flutter路由跳转父级页面向子页面传参及子页面向父级页面传参

    Flutter中页面通过路由跳转传参主要分两种,一种是通过push()跳转时根据设定的参数进行传参,另一种是通过pop()返回时进行传参. 父级页面向子页面push()传参 假设从A页面跳到B页面可能 ...

  2. flutter routes跳转

    flutter可以通过push pop跳转到上一级或者下一级 基本push跳转方法 此时仍然有返回按钮 Navigator.push( context, MaterialPageRoute( buil ...

  3. Flutter路由的跳转、动画与传参(最简单)

    跳转 命名路由 在文件构建时先设置路由参数: new MaterialApp( // 代码 routes: { "secondPage":(BuildContext context ...

  4. Flutter 路由 页面间跳转和传参 返回

    Navigator Navigator用来管理堆栈功能(即push和pop),在Flutter的情况下,当我们导航到另一个屏幕时,我们使用Navigator.push方法将新屏幕添加到堆栈的顶部.当然 ...

  5. flutter中的路由跳转

    在前面的基本路由和命名路由中,都演示了如何进行路由跳转,并且在路由跳转以后,可以借用系统自带的按钮就行返回上一级,当然了,也可以自定义按钮返回上一级. 返回上一级 在前面的例子中,当从Home.dar ...

  6. 16Flutter中的路由 基本路由 基本路由跳转传值(上)

    /* Flutter中的普通路由.普通路由传值.命名路由.命名路由传值 Flutter中的路由通俗的讲就是页面跳转.在Flutter中通过Navigator组件管理路由导航. 并提供了管理堆栈的方法. ...

  7. Flutter路由_fluro引入配置和使用

    Flutter本身提供了路由机制,作个人的小型项目,完全足够了.但是如果你要作企业级开发,可能就会把入口文件变得臃肿不堪.而再Flutter问世之初,就已经了企业级路由方案fluro. flutter ...

  8. Jsp与servlet之间页面跳转及参数传递实例(转)

    原网址:http://blog.csdn.net/ssy_shandong/article/details/9328985 11. jsp与servlet之间页面跳转及参数传递实例 分类: Java ...

  9. vue路由跳转时判断用户是否登录功能

    通过判断该用户是否登录过,如果没有登录则跳转到login登录路由,如果登录则正常跳转. 一丶首先在用户登录前后分别给出一个状态来标识此用户是否登录(建议用vuex): 简单用vuex表示一下,不会可以 ...

随机推荐

  1. 从0移植uboot(六) _实现网络功能

    为uboot添加网卡功能可以让uboot通过tftp下载内核, 方便我们的开发, 对于网卡功能的移植,我们依然在在一遍又一遍的实践这个uboot改造的套路. 找运行逻辑,即插入代码的位置. 根据运行逻 ...

  2. xgboost原理

    出处http://blog.csdn.net/a819825294 1.序 距离上一次编辑将近10个月,幸得爱可可老师(微博)推荐,访问量陡增.最近毕业论文与xgboost相关,于是重新写一下这篇文章 ...

  3. Ubuntu 18.04 Numix主题安装设置

    Ubuntu 18.04 Numix主题安装设置 一.首先安装Numix主题 展现效果如下图 1.安装numix sudo add-apt-repository ppa:numix/ppa 2.安装主 ...

  4. 升级 Glide 4.0 版本相关配置

    http://blog.csdn.net/hexingen/article/details/72578066 http://blog.csdn.net/hexingen/article/details ...

  5. I - All X

    F(x,m) 代表一个全是由数字x组成的m位数字.请计算,以下式子是否成立: F(x,m) mod k ≡ c Input 第一行一个整数T,表示T组数据. 每组测试数据占一行,包含四个数字x,m,k ...

  6. Linux手动添加swap分区

    转自:https://blog.csdn.net/whatday/article/details/51024571 为什么需要swap 根据Redhat公司的建议,Linux系统swap分区最适合的大 ...

  7. javascript的数组之find()

    find()方法返回数组中第一个满足回调函数测试的第一个元素的值.否则返回undefined const arr1 = [1, 2, 3, 4, 6, 9]; let found = arr1.fin ...

  8. INFO Dispatcher:42 - Unable to find 'struts.multipart.saveDir' property setting. Defaulting to javax.servlet.context.tempdir

    INFO Dispatcher:42 - Unable to find 'struts.multipart.saveDir' property setting. Defaulting to javax ...

  9. MOT北京站 | 卓越研发之路:亿万级云端架构演进

    随着IT行业技术周期的快速迭代,如何在激烈的市场竞争中突出重围成为了不少技术人的困惑.除了要保持良好的技术视野外,多向IT行业精英学习他们分享的实战经验,也可让技术提升,达到事半功倍的效果. MOT北 ...

  10. 架构4(lvs lb集群解决方案二 lvs+keepalived)

    keepalived 1.实现调度器的HA 2.对realserver做健康检测 3.动态维护ipvs路由表