参考地址:https://www.jianshu.com/p/b9d6ec92926f

在我们Flutter中,页面之间的跳转与数据传递使用的是Navigator.push和Navigator.pop以及Router。也是比较简单的,我们一起来使用Navigator+Router看看如何实现下面的效果。

1.打开新页面并返回:

  • Navigator.push(打开页面)
  • Navigator.pop(退出当前页面)

Navigator.push(BuildContext context, Route<T> route)

可以将当前页面转换成Router,压入由Navigator管理的路由堆栈(the stack of routes)中

Navigator.pop(BuildContext context, [ T result ]),会将当前页面对应的Router从Navigator管理的路由堆栈中移除。

2.返回数据到上一级页面:

1)将要返回的数据放入到Navigator.pop中

  

//退出当前页面,返回到上一级页面
void _backCurrentPage(BuildContext context) {
print('执行了_backCurrentPage');
///只有执行了这个方法,上级页面才会收到返回的数据
Navigator.pop(context, '我是来自SecondPage的数据');
}
  • 使用Navigator.push+async+await处理返回的数据
/// async关键字声明该函数内部有代码需要延迟执行
/// 使用await会把延迟运算放入到延迟运算的队列(await)中。
void _navigateSecondPage(BuildContext context) async {
print('执行了_navigateSecondPage');
final result =
await Navigator.push(context, MaterialPageRoute(builder: (context) {
return SecondPage();
}));
print('FirstPage收到数据:$result');
}

3.替换当前路由,左上角没有返回了:

Navigator.of(context).pushReplacementNamed('/tabs');

Flutter Navigator&Router(导航与路由)的更多相关文章

  1. Router和History (路由控制)-backbone

    Router和History (路由控制) Backbone.Router担任了一部分Controller(控制器)的工作,它一般运行在单页应用中,能将特定的URL或锚点规则绑定到一个指定的方法(后文 ...

  2. 使用Angular Router导航基础

    名称 简介 Routes 路由配置,保存着那个URL对应着哪个组件,以及在哪个RouterOulet中展示组件. RouterOutlet 在HTML中标记路由内容呈现位置的占位符指令. Router ...

  3. 【共享单车】—— React后台管理系统开发手记:Router 4.0路由实战演练

    前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...

  4. 技术胖Flutter第四季-19导航父子页面的跳转返回

    技术胖Flutter第四季-19导航父子页面的跳转返回 博客地址: https://jspang.com/post/flutter4.html#toc-010 onPressed是当前按下的时候,按下 ...

  5. 技术胖Flutter第四季-20导航的参数传递和接受-1

    技术胖Flutter第四季-20导航的参数传递和接受-1 视频地址:https://www.bilibili.com/video/av35800108/?p=21 先安装一个新的插件: Awesome ...

  6. router.beforeEach、路由元信息、导航守卫与函数式编程

    一.函数的识别: 1.router.beforeEach:主函数.高阶函数.入口函数: 2.匿名参量函数:处理跳转过程中的附加逻辑 (to, from, next) => { if (to.ma ...

  7. Flutter 简介(事件、路由、异步请求)

    1. 前言 Flutter是一个由谷歌开发的开源移动应用软件开发工具包,用于为Android和iOS开发应用,同时也将是Google Fuchsia下开发应用的主要工具.其官方编程语言为Dart. 同 ...

  8. vue.js利用vue.router创建前端路由

    node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...

  9. 技术胖Flutter第四季-21导航的参数传递和接受-2

    21导航的参数传递和接受-2 视频地址 https://www.bilibili.com/video/av35800108/?p=22 博客地址:https://jspang.com/post/flu ...

随机推荐

  1. 使用Python的turtle库实现六角形以及正方形螺旋线的绘制

    1.六角形的绘制 思路:一个六角形可以看作是两个等边三角形具有共同的中心且垂线互成60°角.所以只需实现一个等边三角形的绘制以及第二个三角形绘制起点的移动即可. 代码如下: import turtle ...

  2. usa单位换算

    1.温度换算 摄氏度    C = 5/9(F-32) ≍ (F-32)/1.8 (F为华氏温度值) 华氏度   F = 1.8C + 32 (C为摄氏温度值) 3.重量换算 1品脱(pint) ≍ ...

  3. neo4j索引

    1.创建索引 CREATE INDEX ON : Disease (name) 2.查询所有创建的索引 :schema 或者 call db.indexes 3.删除索引 drop index on ...

  4. b/s实现大文件上传分片上传断点续传

    关键部分 前端用file.slice()分块 前端用FileReader获取每一分块的md5值 后端用MultipartFile接受分块文件 后端用FileOutputStream拼装分块文件 话不多 ...

  5. AJAX里使用模板引擎

    一.概述: 处理响应数据渲染可以使用模板引擎(实际上就是一个API,目的是更容易的将数据渲染到HTML中) 目前市面上有许多模板引擎,可以参考 推荐使用artTemplate,它采用作用域预声明的技术 ...

  6. JS发送验证码;并设置cookie

    Tool.send_code = function(obj) { var isCheck = true, form = $('#editInfo_Form'); var mobile = form.f ...

  7. 机器学习实战(1)- KNN

    KNN:k近邻算法-在训练样本中找到与待测样本距离相近的N个样本,并用这N个样本中所属概率最大的类别作为待测样本的类别. 算法步骤: 1.对训练中的样本数据的不同属性进行归一化处理. 2.计算待测样本 ...

  8. make和rpm的编译、打包总结

    1  make工具使用 1.1 makefile基本规则 Make工具最主要也是最基本的功能就是通过makefile文件来描述源程序之间的相互关系并自动维护编译工作. Makefile的规则: tar ...

  9. Mac zsh 所有命令失效

    正在配置一些东西,然后zsh的所有命令不能用了. 我艹...... 然后一顿猛查,发现有个命令好使,记录一下 在命令行只想输入下面命令 PATH=/bin:/usr/bin:/usr/local/bi ...

  10. comobox在datagrid里,当滚动scrollbar时,会导致comobox选中项被重置的解决办法

    VirtualizingStackPanel.IsVirtualizing="False"