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还是很简单的，页面跳转传值只是字符串，在项目中还会遇到其他类型的数据参数，暂时就先不研究了，等用到的时候在具体细看吧，上面的内容，如果各位有任何疑问，或者发现有错误的地方，还望留言！！！