Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解

如需转载,请注明出处:Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解最近一段时间生病了,整天往医院跑,也没状态学东西了,现在是好了不少了,也该继续学习啦!!!今天给大家讲一下MaterialApp应用组件及routes路由详解,我会着重说一下routes路由的使用及解释,因为会经常用到,前面我写的一些demo所涉及到的组件,都是遵循着MaterialDesi...

Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解

如需转载,请注明出处:Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解

最近一段时间生病了,整天往医院跑,也没状态学东西了,现在是好了不少了,也该继续学习啦!!!

今天给大家讲一下MaterialApp应用组件及routes路由详解,我会着重说一下routes路由的使用及解释,因为会经常用到,前面我写的一些demo所涉及到的组件,都是遵循着Material Design设计风格,所谓的Material Design是由Goodle推出的全新的设计语言,这种设计旨在为手机、平板电脑、台式机和其他平台更一致、更广泛的外观和感觉,接下来我们看一下常见的Material Design风格组件:

Material Design风格组件说明
组件名称中文名称简单说明
Appbar应用按钮组件应用的工具按钮
AlertDialog对话框组件有操作按钮的对话框
BottomNavigationBar底部导航组件底部导航条,可以很容易的在tab之间切换和浏览顶级试图
Card卡片组件带有边框阴影的卡片组件
Drawer抽屉组件Drawer抽屉组件可以实现类似抽屉拉开关闭的效果
FloatingActionButton悬浮按钮组件应用的主要功能操作按钮
FlatButton扁平按钮组件扁平化风格的按钮
MaterialAppMaterial应用组件MaterialApp代表使用纸墨设计风格的应用
PopupMenuButton弹出菜单组件弹出菜单按钮
Scaffold脚手架组件实现了基本的Material Design布局
SnackBar轻量提示组件一个轻量消息提示组件,在屏幕的底部显示
SimpileDialog简单对话框组件简单对话框组件。只起提示作用,没有交互
TabBar水平选项卡及视图组件一个显示水平选项卡的Material Design组件
TextField文本框组件可以接受应用输入文本的组件

Material Design风格的组件有这么多,不看不知道,一看吓一跳,这基本上都没有用过呀,漫漫长征路,还有很远要走呀,一个一个学吧!!!

  • MaterialApp(应用组件)

MaterialApp组件属性及描述
属性名类型说明
titleString应用程序的标题,该标题出现在如下位置Android:任务管理器的程序快照之上,iOS:程序切换管理器中
themeThemeData定义应用所使用的主题颜色,可以制定一个主题中每个控件的颜色
colorColor应用的主要颜色值,即primary color
homeWidget这个是一个Widget对象,用来定义一个主题中每个控件的颜色
routesMap<String,WidgetBuilder>定义应用中页面跳转的原则
initialRouteString初始化路由
onGenerateRouteRouteFactory路由回调函数,当通过Nacigator.of(context).pushNamed跳转路由时,在routes查找不到时,会调用该方法
onLocaleChanged当系统需改语言的时候,会触发这个回调
nagavitorObserverList<NavigatorObserver>导航观察器
debugShowMaterialGirdbool是否显示纸墨设计基础布局网格,用来调试UI的工具
showPerformanceOverlaybool显示性能标签

具体看下代码应用:

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(""),},  
源文地址:https://www.guoxiongfei.cn/cntech/24340.html