Route 和 Navigator 用于页面之间的跳转

一 Navigator 的 push 和 pop 用于页面之间的跳转

创建MaterialApp时可以指定routes参数,该参数是一个映射路由名称和构造器的Map

跳转的时候 使用 push

跳回的时候使用 pop

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(theme: ThemeData(primarySwatch: Colors.blue,),home: FirstPage(),routes: <String ,WidgetBuilder>{'/first':(BuildContext context) =>FirstPage(),'/second':(BuildContext context) =>SecondPage()},);}
}// 第一个页面
class FirstPage extends StatelessWidget
{@overrideWidget build(BuildContext context) {return new Scaffold(appBar:new AppBar(title:new Text( "第一个页面")),body:new Center(child:new RaisedButton(child: new Text("点击打开第二个页面"),onPressed: (){Navigator.of(context).pushNamed('/second');},      ),),);}}class SecondPage extends StatelessWidget
{@overrideWidget build(BuildContext context) {return new Scaffold(appBar:new AppBar(title:new Text( "第二个页面")),body:new Center(child:new RaisedButton(child: new Text("点击返回"),onPressed: (){Navigator.of(context).pop();},      ),),);}}

二 第二种方式

直接使用MaterialPageRoute创建路由,它是一种模态路由,可以通过平台自适应的过渡效果来切换屏幕。默认情况下,当一个模态路由被另一个替换时,上一个路由将保留在内存中,如果想释放所有资源

onPressed: (){Navigator.push(context, new MaterialPageRoute(builder: (context) => SecondPage()));
},

三 示例操作 参数回调

第一个页面点击进去 第二个页面 点击喜欢与否 回传结果

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(theme: ThemeData(primarySwatch: Colors.blue,),home: NewTableList(),);}
}class ContentPage extends StatelessWidget
{final HotNews news;ContentPage(this.news);@overrideWidget build(BuildContext context) {return new Scaffold(appBar:new AppBar(title:new Text(news.title)),body:new Padding( padding: new EdgeInsets.all(25),child: new Column(children: <Widget>[new Text(news.content),new Row(mainAxisAlignment: MainAxisAlignment.spaceAround,children: <Widget>[new RaisedButton(onPressed: (){// 点击的时候 回调用户的选择结果Navigator.pop(context,'Good');},child: new Text("不错"),                      ),new RaisedButton(onPressed: (){// 点击的时候 回调用户的选择结果Navigator.pop(context,'Bad');                       },child:new Text("差劲"),                      )],)],),),);}
}// 创建一个新闻的类
class HotNews{String title;String content;HotNews({this.title,this.content});}// 创建列表
class NewTableList extends StatelessWidget
{final List<HotNews> arrs = new List.generate(20, (idx) => new HotNews(title:'这是第 $idx 标题',content: '这是第 $idx 部分的正文',)); @override Widget build(BuildContext context) {return new Scaffold(appBar: AppBar(title: Text("热点资讯")),body: new ListView.builder(itemCount: arrs.length,itemBuilder: (context,idx){return new ListTile(title: new Text(arrs[idx].title),// 添加一个点击事件onTap: () async {// 创建一个结果 结束用户的点击  String readRes = await Navigator.push(context ,new MaterialPageRoute(builder: (context) => new ContentPage(arrs[idx])));// 显示回传的结果内容if (readRes != null){Scaffold.of(context).showSnackBar(new SnackBar(content: new Text("$readRes"),duration: const Duration(seconds: 2),));}},                  );},),         );}}

7-flutter Navigator 和Route相关推荐

  1. flutter 局部状态和全局状态区别_给 Android 开发者的 Flutter 指南

    这篇文档旨在帮助 Android 开发者利用既有的 Android 知识来通过 Flutter 开发移动应用.如果你了解 Android 框架的基本知识,你就可以使用这篇文档作为 Flutter 开发 ...

  2. Flutter系列-flutter路由管理

    Flutter路由管理 初识路由概念 一.路由管理 1.1.Route 1.2.MaterialPageRoute 1.3.Navigator 1.4.路由传值 1.5 命名路由 1.6.命名路由参数 ...

  3. 【Flutter】应用开发笔记

    1 获取Flutter SDK 1.下载安装包 2.将压缩包解压,然后把其中的 flutter 目录整个放在你想放置 Flutter SDK 的路径中 勿将 Flutter 安装在需要高权限的文件夹内 ...

  4. java hasfocus_说说Flutter中的无名英雄 —— Focus

    Focus系列的Widget及功能类在Flutter中可以说是无名英雄的存在,默默的付出但却不太为人所知.在日常开发使用中也不太会用到它,这是为什么呢?带着这个问题我们开始今天的内容. 1.Focus ...

  5. Flutter 布局 - UI - 官方文档 - 学习速记(一)

    设置crossAxisAlignment属性值为CrossAxisAlignment.start,这会将该列中的子项左对齐. 获取主题色:Theme.of(context).primaryColor; ...

  6. Flutter 无埋点SDK实现

    前言 先看下各个平台自动化埋点支持 平台 特点 自动化埋点方案 Android Java支持编译器静态代理/运行期动态代理 有成熟方案和产品,例如GrowingIO.神策.友盟 iOS OC提供了强大 ...

  7. flutter 局部状态和全局状态区别_Android 开发者遇到 5G、AI,写给 Android 开发者的 Flutter 指南

    ​前言 Flutter 是 Google 用以帮助开发者在 iOS 和 Android 两个平台开发高质量原生 UI 的移动 SDK.Flutter 兼容现有的代码,免费并且开源,在全球开发者中广泛被 ...

  8. Flutter路由守卫拦截

    路由守卫拦截最常见的应用场景就是对用户数据权限的校验(用户是否是登录状态,404页面跳转--). 在Flutter中可以通过MaterialAppWedgit中的onGenerateRoute属性实现 ...

  9. 给 Android 开发者的 Flutter 指南(上)

    这篇文档旨在帮助 Android 开发者通过 Flutter 开发移动应用.如果你了解 Android 框架的基本知识,你就可以使用这篇文档作为 Flutter 开发的快速入门. 你的 Android ...

最新文章

  1. rs232串口驱动_LED驱动电路设计
  2. 怎么逐步突破,成为Python高手?
  3. namenode需要多大内存
  4. 《战狼2》中人脸识别无人机表现不俗,军、警用果真如此高能?
  5. Matlab生成Xilinx Rom IP CORE的初始化内容coe文件
  6. 网络爬虫初步:从一个入口链接开始不断抓取页面中的网址并入库
  7. [Cocos2d-x For WP8]Hello world
  8. Maven基础了解及配置信息
  9. SimMechanics/Second Generation倒立摆模型建立及初步仿真学习
  10. 转载:【微信小程序】 wx:if 与 hidden(隐藏元素)区别
  11. 浙江大学的”程序设计入门-C语言课程“截图
  12. 智能优化算法应用:基于GWO优化的灰度熵图像多阈值分割 - 附代码
  13. 计算机管理用户u,discuz+uclient 手动提升普通用户至管理员权限网站安全 -电脑资料...
  14. 山东大学高频电子线路实验七 锁相环调频及解调实验详解
  15. 计算机不识别固态硬盘,电脑经常不识别固态硬盘
  16. h5调用指纹识别_Vue指纹识别验证 h5plus
  17. 也谈谈如何胜任中小型公司的技术总监
  18. 多种模块拔号上网驱动开发调试
  19. 能够关闭并退出计算机程序的是,电脑强制关闭程序按哪三个键 可按Alt+F4关闭当前页面...
  20. python3 字符串转list的另类方法

热门文章

  1. 安装完DevExpress14.2.5,如何破解它呢?
  2. 三、概念数据模型CDM(Conceptual Database Model )
  3. 简评游戏人工智能相关的中文书(下)
  4. notepad++及Scintilla
  5. 【C++】【OpenCv】图片加噪声处理,计时,及键盘事件响应捕捉
  6. 【C++】C/C++ 中的单例模式
  7. php 的opcode缓存apc以及其安装
  8. C# 2进制、8进制、10进制、16进制...各种进制间的轻松转换
  9. 删除SQL数据库中事务日志方法
  10. php数据 文本_php直接调用文本文件内容