Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解
如需转载,请注明出处:Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解
最近一段时间生病了,整天往医院跑,也没状态学东西了,现在是好了不少了,也该继续学习啦!!!
今天给大家讲一下MaterialApp应用组件及routes路由详解,我会着重说一下routes路由的使用及解释,因为会经常用到,前面我写的一些demo所涉及到的组件,都是遵循着Material Design设计风格,所谓的Material Design是由Goodle推出的全新的设计语言,这种设计旨在为手机、平板电脑、台式机和其他平台更一致、更广泛的外观和感觉,接下来我们看一下常见的Material Design风格组件:
组件名称 | 中文名称 | 简单说明 |
Appbar | 应用按钮组件 | 应用的工具按钮 |
AlertDialog | 对话框组件 | 有操作按钮的对话框 |
BottomNavigationBar | 底部导航组件 | 底部导航条,可以很容易的在tab之间切换和浏览顶级试图 |
Card | 卡片组件 | 带有边框阴影的卡片组件 |
Drawer | 抽屉组件 | Drawer抽屉组件可以实现类似抽屉拉开关闭的效果 |
FloatingActionButton | 悬浮按钮组件 | 应用的主要功能操作按钮 |
FlatButton | 扁平按钮组件 | 扁平化风格的按钮 |
MaterialApp | Material应用组件 | MaterialApp代表使用纸墨设计风格的应用 |
PopupMenuButton | 弹出菜单组件 | 弹出菜单按钮 |
Scaffold | 脚手架组件 | 实现了基本的Material Design布局 |
SnackBar | 轻量提示组件 | 一个轻量消息提示组件,在屏幕的底部显示 |
SimpileDialog | 简单对话框组件 | 简单对话框组件。只起提示作用,没有交互 |
TabBar | 水平选项卡及视图组件 | 一个显示水平选项卡的Material Design组件 |
TextField | 文本框组件 | 可以接受应用输入文本的组件 |
Material Design风格的组件有这么多,不看不知道,一看吓一跳,这基本上都没有用过呀,漫漫长征路,还有很远要走呀,一个一个学吧!!!
MaterialApp(应用组件)
属性名 | 类型 | 说明 |
title | String | 应用程序的标题,该标题出现在如下位置Android:任务管理器的程序快照之上,iOS:程序切换管理器中 |
theme | ThemeData | 定义应用所使用的主题颜色,可以制定一个主题中每个控件的颜色 |
color | Color | 应用的主要颜色值,即primary color |
home | Widget | 这个是一个Widget对象,用来定义一个主题中每个控件的颜色 |
routes | Map<String,WidgetBuilder> | 定义应用中页面跳转的原则 |
initialRoute | String | 初始化路由 |
onGenerateRoute | RouteFactory | 路由回调函数,当通过Nacigator.of(context).pushNamed跳转路由时,在routes查找不到时,会调用该方法 |
onLocaleChanged | 当系统需改语言的时候,会触发这个回调 | |
nagavitorObserver | List<NavigatorObserver> | 导航观察器 |
debugShowMaterialGird | bool | 是否显示纸墨设计基础布局网格,用来调试UI的工具 |
showPerformanceOverlay | bool | 显示性能标签 |
具体看下代码应用:
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart'; void main() => runApp(DemoApp()); class DemoApp extends StatelessWidget{
//这个是整个应用的主组件
@override
Widget build(BuildContext context) {
// TODO: implement build
return new MaterialApp(
title: 'MaterialApp示例',
debugShowMaterialGrid: true,
showPerformanceOverlay: true,
theme: new ThemeData(
primaryColor: Colors.deepOrange
),
home: new MaterialAppDemo(),
);
}
} class MaterialAppDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
title: Text('MaterialAppDemo'),
),
body: new Center(
child: new Text('MaterialAppDemo'),
),
);
}
}
效果图:
demo里面我主要尝试了title、theme、home、debugShowMaterialGird、showPerformanceOverlay属性,根据截图,给大家直观的对比一下结果:
title:应用程序的标题(因为我只有Android测试机),可以看到第二张截图,切到任务管理器,应用程序的标题为MaterialApp示例。
theme:我用theme更改了应用主题的颜色,可以看到第一张截图导航栏的颜色改为了橙色。
home:home代表着整个页面的主widget,可以理解为根widget,而home的主体就是一个Center容器组件,然后里面放一个文本。
debugShowMaterialGird:这个属性我们设置为了true,页面展示出来会有很多网格,用于调试UI(这个要怎么用来调试UI,小弟还不会。。。)
showPerformanceOverlay:性能标签,这个设置为true,在页面的最上方会出现一些性能相关的数据。
routes(路由处理)
routes对象是一个Map<String,WidgetBuilder>,当使用Navigator.pushName来路由的时候,会在routes查找路由的名字,然后使用对应的WidgetBuilder来构造一个带有页面切换动画的MaterialPageRoute。
下面我着重讲一下routes路由处理,因为我觉得页面间的跳转是最常用到的,而且很重要,下面的demo主要功能是在A页面点击一个按钮跳转到B页面,并且两个页面间传值。
注:路由跳转分静态路由跳转和动态路由跳转,两者的区别就是是否给第二个页面传值
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart'; void main() => runApp(DemoApp()); class DemoApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new MaterialApp(
title: 'theme Title',
debugShowMaterialGrid: false,
home: new Scaffold(
appBar: new AppBar(
leading: Icon(Icons.menu),
actions: <Widget>[
Icon(Icons.search)
],
title: new Text('routes demo'),
),
body: new Center(
child: new Text('主页'),
),
),
routes: {
'/first':(BuildContext context) => new FirstPage(),
'/second':(BuildContext context) => new SecondPage(""),
},
initialRoute: '/first',//初始化路由为first页面
);
}
} class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
title: new Text('First Page'),
),
body: new Center(
child: RaisedButton(
child: new Text('第一个页面'),
onPressed: (){
//静态路由跳转,不给第二个页面传值
// Navigator.pushNamed(context, '/second').then((value){
// Fluttertoast.showToast(msg: value,toastLength: Toast.LENGTH_LONG,gravity: ToastGravity.BOTTOM);
// });
//动态路由跳转,给第二个页面传值
Navigator.of(context).push(new MaterialPageRoute(builder: (context){
return new SecondPage('这是从第一个页面传递出去的数据');
})).then((value){
Fluttertoast.showToast(msg: value,toastLength: Toast.LENGTH_LONG,gravity: ToastGravity.BOTTOM);
});
}
),
),
);
}
} class SecondPage extends StatelessWidget {
var content = '';
SecondPage(this.content); @override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
title: new Text('Second Page'),
),
body: new RaisedButton(
child: new Text(content),
onPressed: (){
// Navigator.pop(context);//不给上一级页面返回参数
Navigator.of(context).pop("这个是从第二个页面返回的数据");//给上一级页面返回参数
}
),
);
}
}
效果截图:
来细讲一下上面的代码吧,要不然还真容易看懵逼了。
1.首先初始化路由列表,为后面页面跳转做准备,路由列表对应这每一个页面
routes: {
'/first':(BuildContext context) => new FirstPage(),
'/second':(BuildContext context) => new SecondPage(""),
},
2.静态路由跳转,静态由A页面跳转到B页面,不给B页面传值,但是接收B页面返回的数据,并将返回值toast出来,即图3
Navigator.pushNamed(context, '/second').then((value){
Fluttertoast.showToast(msg: value,toastLength: Toast.LENGTH_LONG,gravity: ToastGravity.BOTTOM);
});
3.动态路由跳转,A页面跳转到B页面,并给B页面传值,将B页面的按钮文案赋值,从B页面返回后,将B页面的返回值toast出来,即图2,图3
Navigator.of(context).push(new MaterialPageRoute(builder: (context){
return new SecondPage('这是从第一个页面传递出去的数据');
})).then((value){
Fluttertoast.showToast(msg: value,toastLength: Toast.LENGTH_LONG,gravity: ToastGravity.BOTTOM);
});
4.由B页面带数据返回到A页面(页面Pop返回有两类,一类带参数返回,一类不带参数返回)
4.1带参数返回
Navigator.of(context).pop("这个是从第二个页面返回的数据");//给上一级页面返回参数
4.2不带参数返回
Navigator.pop(context);//不给上一级页面返回参数
注:页面Pop还有两个方法常用到
Navigator.canPop(context);//页面是否可以pop,返回bool值,可以用作页面判断
Navigator.maybePop(context);//如果当前页面可以pop,则会执行,反之则不会执行,更安全
以上就是今天的全部内容了,稍微难一点的就是路由这块儿了,我写的demo还是很简单的,页面跳转传值只是字符串,在项目中还会遇到其他类型的数据参数,暂时就先不研究了,等用到的时候在具体细看吧,上面的内容,如果各位有任何疑问,或者发现有错误的地方,还望留言!!!
下一章节:Flutter学习笔记(16)--Scaffold脚手架、AppBar组件、BottomNavigationBar组件
Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解的更多相关文章
- Flutter学习笔记(9)--组件Widget
如需转载,请注明出处:Flutter学习笔记(9)--组件Widget 在Flutter中,所有的显示都是Widget,Widget是一切的基础,我们可以通过修改数据,再用setState设置数据(调 ...
- qml学习笔记(二):可视化元素基类Item详解(上半场anchors等等)
原博主博客地址:http://blog.csdn.net/qq21497936本文章博客地址:http://blog.csdn.net/qq21497936/article/details/78516 ...
- 【Ext.Net学习笔记】03:Ext.Net DirectEvents用法详解、DirectMethods用法详解
Ext.Net通过DirectEvents进行服务器端异步的事件处理.[Ext.Net学习笔记]02:Ext.Net用法概览.Ext.Net MessageBus用法.Ext.Net布局 中已经简单的 ...
- <转>ASP.NET学习笔记之MVC 3 数据验证 Model Validation 详解
MVC 3 数据验证 Model Validation 详解 再附加一些比较好的验证详解:(以下均为引用) 1.asp.net mvc3 的数据验证(一) - zhangkai2237 - 博客园 ...
- [原创]java WEB学习笔记43:jstl 介绍,core库详解:表达式操作,流程控制,迭代操作,url操作
本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...
- Android开发学习笔记:Intent的简介以及属性的详解【转】
一.Intent的介绍 Intent的中文意思是“意图,意向”,在Android中提供了Intent机制来协助应用间的交互与通讯,Intent负责对应用中一次操作的动作.动作涉及数据.附加数据进行描述 ...
- 【转载】Android开发学习笔记:Intent的简介以及属性的详解
http://liangruijun.blog.51cto.com/3061169/634411/ 一.Intent的介绍 Intent的中文意思是“意图,意向”,在Android中提供了Intent ...
- [ 原创 ]学习笔记-Android 学习笔记 Contacts (一)ContentResolver query 参数详解 [转载]
此博文转载自:http://blog.csdn.net/wssiqi/article/details/8132603 1.获取联系人姓名 一个简单的例子,这个函数获取设备上所有的联系人ID和联系人NA ...
- es6学习笔记(1) let和const命令详解
let和const命令: Es6新增了let命令,声明变量,但与var不一样的,只在let命令所在的代码块内有效(如for循环之外let声明的变量就不再有效).并且let不像var那样会发生" ...
随机推荐
- 从无到有构建vue实战项目(五)
八.错误总结(一) webpack打包项目识别子组件路径问题 之所以出现了这样的问题是因为在webpack打包项目时,未将此处的子组件路径正确识别: 将此处的carousel改为carousel.vu ...
- 浅谈 Attention 机制的理解
什么是注意力机制? 注意力机制模仿了生物观察行为的内部过程,即一种将内部经验和外部感觉对齐从而增加部分区域的观察精细度的机制.例如人的视觉在处理一张图片时,会通过快速扫描全局图像,获得需要重点关注的目 ...
- json字符串转换成java对象
- 七牛云图床和Markdown使用
七牛云图床和Markdown使用 1.图床是什么? 图床一般是指储存图片的服务器,有国内和国外之分.国外的图床由于有空间距离等因素决定访问速度很慢影响图片显示速度.国内也分为单线空间.多线空间和cdn ...
- 和朱晔一起复习Java并发(二):队列
和朱晔一起复习Java并发(二):队列 老样子,我们还是从一些例子开始慢慢熟悉各种并发队列.以看小说看故事的心态来学习不会显得那么枯燥而且更容易记忆深刻. 阻塞队列的等待? 阻塞队列最适合做的事情就是 ...
- vs项目依赖项黄色感叹号解决方案
右键项目解决方案,生成解决方案或重新生成解决方案,黄色感叹号消失,依赖项生效,亲测有效
- redis 发布与订阅原理分析
前言:用了redis也有一段时间了,但是发布与订阅的使用频率也不高,趁着这次空闲,深究下redis的发布与订阅模式. 一.订阅频道和信息发布 功能说明:Redis 的 SUBSCRIBE 命令可以让客 ...
- tablayout_不能左右滑动问题小计
<android.support.design.widget.TabLayout android:id="@+id/tab_pic" android:layout_width ...
- 拟合多项式演示overfitting
# 预先导入库 from sklearn.linear_model import LinearRegression from sklearn.preprocessing import Polynomi ...
- java - 解释内存中的栈(stack)、堆(heap)和方法区(method area)的用法
通常我们定义一个基本数据类型的变量,一个对象的引用,还有就是函数调用的现场保存都使用JVM中的栈空间: 而通过new关键字和构造器创建的对象则放在堆空间,堆是垃圾收集器管理的主要区域,由于现在的垃圾收 ...