如需转载，请注明出处：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	扁平按钮组件	扁平化风格的按钮
MaterialApp	Material应用组件	MaterialApp代表使用纸墨设计风格的应用
PopupMenuButton	弹出菜单组件	弹出菜单按钮
Scaffold	脚手架组件	实现了基本的Material Design布局
SnackBar	轻量提示组件	一个轻量消息提示组件，在屏幕的底部显示
SimpileDialog	简单对话框组件	简单对话框组件。只起提示作用，没有交互
TabBar	水平选项卡及视图组件	一个显示水平选项卡的Material Design组件
TextField	文本框组件	可以接受应用输入文本的组件

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

• MaterialApp（应用组件）

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，小弟还不会。。。）

showPerformanc