Flutter路由的跳转、动画和传参详解(最简单)
时间:2022-07-28
本文章向大家介绍Flutter路由的跳转、动画和传参详解(最简单),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
路由
做Android/iOS原生开发的时候,要打开一个新的页面,你得知道你的目标页面对象,然后初始化一个Intent或者ViewController,再通过startActivity或者pushViewController来推出一个新的页面,不能跟web一样,直接丢一个链接地址就跳转到新的页面。当然,可以自己去加一个中间层来实现这些功能。
Flutter里面是原生支持路由的。Flutter的framework提供了路由跳转的实现。我们可以直接使用这些功能。
Flutter路由介绍
Flutter里面有路由支持所有的路由场景,push、pop页面,页面间的参数传递等等。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路由的跳转、动画以及传参的相关方法,依葫芦画瓢即可轻松应对。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对ZaLou.Cn的支持。
- Oracle数据库重启后密码失效的问题(r12笔记第91天)
- Oracle和MySQL竟然可以这么写这样的SQL?(r12笔记第99天)
- Golang语言社区--了解C++ 用libcurl库进行http通讯网络编程
- Golang语言-- 小技巧
- MySQL Shell的简单介绍(r12笔记第95天)
- MYSQL索引条件下推的简单测试
- 教你如何用AST语法树对代码“动手脚”
- Oracle和MySQL中短小精悍的SQL
- Oracle 12cR2中的ADG会话保留特性
- IP地址定位区间的问题分析
- Javascript即将迎来Optional Chaining
- MySQL中需要注意的字段长度问题
- 不停机分库分表迁移
- MySQL中一个文档疏漏的分析测试
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 13 个 JavaScript 数组精简技巧
- 增强型的 <input type=number>
- Python-sqlite3-08-往数据库中写入Excel中信息
- 键盘敲入 A 字母时,操作系统期间发生了什么...
- 类与对象」NSObject对象的分类
- 如何取SQL结果集的第一条记录
- postman的使用技巧
- Nodejs Serialport文档翻译
- Flask-Login文档翻译
- jsp作业——简单的试卷和自动打分
- ESP8266烧入nodemcu简易教程
- 搭建简易的物联网服务端和客户端-STM32(一)
- 搭建简易的物联网服务端和客户端-Nodejs_net(二)
- 搭建简易的物联网服务端和客户端-Nodejs_mysql(三)
- 搭建简易的物联网服务端和客户端-net+mysql(四)