Flutter路由的跳转、动画与传参(最简单)
跳转
命名路由
在文件构建时先设置路由参数:
new MaterialApp(
// 代码
routes: {
"secondPage":(BuildContext context)=>new SecondPage(),
},
);
在需要做路由跳转的时候直接使用:
Navigator.pushNamed(context, "secondPage");
构建路由
Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context){
return new SecondPage();
}))
区别
以上两种路由的优缺点十分明显:
- 命名路由简明并且系统,但是不能传参。
- 构建路由可以传参,但比较繁琐。
动画
构建动画
先在构建一个动画效果,如:
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,
);
}
以上动画意思为跳转时新页面从右边划入,返回时向右边划出。
引入动画
Navigator.push<String>(
context,
new PageRouteBuilder(pageBuilder: (BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation) {
// 跳转的路由对象
return new Wechat();
}, transitionsBuilder: (
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child,
) {
return MyStatefulWidgetState
.createTransition(animation, child);
}))
传参
跳转时
传
前面我们说过,flutter的命名路由跳转无法传参。因此,我们只能使用构建路由的方式传参:
Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context){
return new SecondPage(
title:'此处为参数',
name:'此处为名字参数'
);
}))
收
class SecondPage extends StatefulWidget {
String title;
String name;
Wechat({
Key key,
this.title,
this.name
}) : super(key: key);
@override
State<StatefulWidget> createState() {
return new MyStatefulWidgetState();
}
}
返回时
传
当触发路由返回的事件时,传参是十分简单的。和跳转时的方式一样,甚至更简单,只需要:
Navigator.of(context).pop('这个是要返回给上一个页面的数据');
收
但是,在接受返回时的数据需要改造前面触发跳转时的路由:
// 命名路由
Navigator.pushNamed<String>(context, "ThirdPage").then( (String value){
//处理代码
});
// 构建路由
Navigator.push<String>(context, new MaterialPageRoute(builder: (BuildContext context){
return new ThirdPage(title:"请输入昵称");
})).then( (String result){
//处理代码
});
以上就是Flutter路由的跳转、动画以及传参的相关方法,依葫芦画瓢即可轻松应对。
Flutter路由的跳转、动画与传参(最简单)的更多相关文章
- php+js实现重定向跳转并post传参
页面重定向跳转并post传参 $mdata=json_encode($mdata);//如果是字符串无需使用json echo " <form style='display:none; ...
- React路由安装使用和多种方式传参
安装路由 npm i react-router-dom -S 引入路由 import { BowserRouter as Router, Route, Switch, ... } from " ...
- angular 跳转页面时传参
首先,你需要已经配置过你的rout,比如: $stateProvider .state('firstPage',{ url:'/Page/firstPage', templateUrl: 'Page/ ...
- 利用PHP实现页面跳转同时POST传参,CURL不行
function payto(){ echo "<form style='display:none;' id='form1' name='form1' method='post' ac ...
- vue 和 react 路由跳转和传参
react 1 .跳转方式加传参 this.props.history.push({ //地址 pathname: '/film/Details', //路由传参 ...
- 3种vue路由传参的基本模式
路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便 ...
- vue 路由传参 params 与 query两种方式的区别
初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: router文件下index.js里面,是这么定义路由的: { p ...
- vue 路由传参的三种基本模式
路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便 ...
- vue之路由传参三种基本方式
现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据. 父组件中: <li v-for="article in articles" @click= ...
随机推荐
- Angularjs中的缓存以及缓存清理
写在最前面:这篇博文是2篇文章组成,详细介绍了Angularjs中的缓存以及缓存清理,文章由上海尚学堂转载过来,欢迎大家阅读和评论.转载请注明出处,谢谢! 一个缓存就是一个组件,它可以透明地储存数据, ...
- [Java]LeetCode133. 克隆图 | Clone Graph
Clone an undirected graph. Each node in the graph contains a label and a list of its neighbors. OJ's ...
- [Swift]LeetCode899. 有序队列 | Orderly Queue
A string S of lowercase letters is given. Then, we may make any number of moves. In each move, we c ...
- Linux中FTP远程传输,SSH远程连接,以及SCP远程拷贝
常用服务器ftp.ssh 1. Linux常用服务器构建-ftp服务器 ftp服务器 FTP 是File Transfer Protocol(文件传输协议)的英文简称,而中文简称为“文传协议”. 用于 ...
- 【jpa】spring data jpa 配置使用
1.spring data jpa 简单介绍 jpa是用于对象持久化的API,jpa是一种规范,而其他的ORM框架(hibernate,topLink等)是其实现,所以jpa可以使用不同的实现方式,修 ...
- Hive篇--相关概念整理一
一.前述 hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,并提供简单的sql查询功能,可以将sql语句转换为MapReduce任务进行运行. 其优点是学习成本低 ...
- 解决 python 读取文件乱码问题(UnicodeDecodeError)
解决 python 读取文件乱码问题(UnicodeDecodeError) 确定你的文件的编码,下面的代码将以'utf-8'为例,否则会忽略编码错误导致输出乱码 解决方案一 with open(r' ...
- 网络协议 7 - UDP 协议:性善碰到城会玩
网络协议五步登天路,我们一路迈过了物理层.链路层,今天终于到了传输层.从这一层开始,很多知识应该都是服务端开发必备的知识了,今天我们就一起来梳理下. 其实,讲到 UDP,就少不了 TC ...
- shell的exec命令
工作中遇到运维人员挂supervisor的时候建议启动使用命令control.sh start, 并且在control.sh 里面启动命令: exec -c ./bin/xxx -f config/x ...
- ASP.NET 下载文件方式
protected void Button1_Click(object sender, EventArgs e) { /* 微软为Response对象提供了一个新的方法TransmitFile来解决使 ...