Flutter路由跳转及参数传递
本文要介绍的知识点
- 用路由推出一个新页面
- 打开新页面时,传入参数
- 参数的回传
路由
做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路由跳转及参数传递的更多相关文章
- Flutter路由跳转父级页面向子页面传参及子页面向父级页面传参
Flutter中页面通过路由跳转传参主要分两种,一种是通过push()跳转时根据设定的参数进行传参,另一种是通过pop()返回时进行传参. 父级页面向子页面push()传参 假设从A页面跳到B页面可能 ...
- flutter routes跳转
flutter可以通过push pop跳转到上一级或者下一级 基本push跳转方法 此时仍然有返回按钮 Navigator.push( context, MaterialPageRoute( buil ...
- Flutter路由的跳转、动画与传参(最简单)
跳转 命名路由 在文件构建时先设置路由参数: new MaterialApp( // 代码 routes: { "secondPage":(BuildContext context ...
- Flutter 路由 页面间跳转和传参 返回
Navigator Navigator用来管理堆栈功能(即push和pop),在Flutter的情况下,当我们导航到另一个屏幕时,我们使用Navigator.push方法将新屏幕添加到堆栈的顶部.当然 ...
- flutter中的路由跳转
在前面的基本路由和命名路由中,都演示了如何进行路由跳转,并且在路由跳转以后,可以借用系统自带的按钮就行返回上一级,当然了,也可以自定义按钮返回上一级. 返回上一级 在前面的例子中,当从Home.dar ...
- 16Flutter中的路由 基本路由 基本路由跳转传值(上)
/* Flutter中的普通路由.普通路由传值.命名路由.命名路由传值 Flutter中的路由通俗的讲就是页面跳转.在Flutter中通过Navigator组件管理路由导航. 并提供了管理堆栈的方法. ...
- Flutter路由_fluro引入配置和使用
Flutter本身提供了路由机制,作个人的小型项目,完全足够了.但是如果你要作企业级开发,可能就会把入口文件变得臃肿不堪.而再Flutter问世之初,就已经了企业级路由方案fluro. flutter ...
- Jsp与servlet之间页面跳转及参数传递实例(转)
原网址:http://blog.csdn.net/ssy_shandong/article/details/9328985 11. jsp与servlet之间页面跳转及参数传递实例 分类: Java ...
- vue路由跳转时判断用户是否登录功能
通过判断该用户是否登录过,如果没有登录则跳转到login登录路由,如果登录则正常跳转. 一丶首先在用户登录前后分别给出一个状态来标识此用户是否登录(建议用vuex): 简单用vuex表示一下,不会可以 ...
随机推荐
- BCP文件导入SQLServer数据库遇到的问题
1. BCP文件插入sql server数据库,未指定数据库字段类型情况下,需要每个字段单独指定字段长度 2.文件中的存储值得类型 3.设置最大的类型
- K XOR Clique
BaoBao has a sequence a1,a2,...,an. He would like to find a subset S of {1,2,...,n} such that ∀i ...
- 让ADO.NET Entity Framework支持Oracle数据库
Oracle最近发布了 Oracle Data Access Component(ODAC)11. 2 Rel 4,其中增加了对 Entity Framework 4.1 和4.2的支持.这让 .NE ...
- Timer和时间调度
Timer作为JDK提供的util工具,不太适合作为周期调度任务,只适合简单的定时操作(按照一定时间频率出发任务),在java的领域解决方案中,Quartz无疑是翘楚. Timer的调度方法有: pu ...
- Exception in thread "main" org.apache.hadoop.security.AccessControlException: Permission denied: user=lenovo, access=WRITE, inode="/user/hadoop/spark/people_savemode_test/_temporary/0":hadoop:supergro
保存文件时权限被拒绝 曾经踩过的坑: 保存结果到hdfs上没有写的权限 通过修改权限将文件写入到指定的目录下 * * * $HADOOP_HOME/bin/hdfs dfs -chmod 777 /u ...
- C#常用加密方法
using System; using System.IO; using System.Security.Cryptography; using System.Text; /// <summar ...
- 用户场景分析i
名字 学生(注重饮食选择,挑剔) 年龄 20 收入 无 知识层面 大学 使用这个网站的典型场景 中午或者晚上饿了但是不知道想吃什么,又不想随便吃,还是比较挑剔..这时,他就需要通过我们的网站来看其他人 ...
- [No0000186]治愈系课程教材 第一课
一部分:时态 时态有时间和特点组成 时间:现在.过去.将来 特点:一般.完成.进行.完成进行 所以时态总共有12种(加上过去将来的时间又多出4种时态,总共16种) 一般现在时 一般过去时 一般将来时 ...
- orange---openresty.
需要有一个类似于API网关的中间件来做API的管理工作,也就是API的实现方面更多的考虑业务逻辑,安全.性能.监控可以交由网关来做(如下图所示,下图根据Kong官方文档修改) 通过MySQL存储来简单 ...
- 判断是手机请求还是pc请求
网址 http://detectmobilebrowsers.com/ string u = Request.ServerVariables["HTTP_USER_AGENT"]; ...