Flutter 入门学习（五）— Material Design风格组件

1. 概述

Material Design是由谷歌推出的全新设计语言，这种设计语言旨在为手机、平板电脑、台式机和其他平台提供更一致、更广泛的外观和感觉。Material Design风格是一直非常有质感的设计风格，并会提供一些默认的交互动画。

2. App结构和导航组件

2.1 MaterialApp(应用组件)

MaterialApp代表使用Material Design风格的应用，里面包含了其他所需的基本控件。官方提供的示例demo就是从MaterialApp这个主组件开始的。

MaterialApp组件常见属性

属性名	类型	说明
title	String	应用程序的标题。该标题出现在以下位置：Android：任务管理器的程序快照上； IOS：程序切换管理器中
theme	ThemeData	定义应用所使用的主题颜色，可以指定主题中每个控件的颜色
color	Color	应用的主要颜色值，即primary color
home	Widget	用来定义当前应用打开时所显示的界面
routes	Map<String, WidgetBuilder>	定义应用中页面跳转规则
initialRoute	String	初始化路由
onGenerateRoute	RouteFactory	路由回调函数。当通过Navigator.of(context).pushNamed跳转路由的时候，在routes查找不到时，会调用该方法
onLocaleChanged	-	当系统修改语言的时候，会触发这个回调
navigatorObservers	List<NavigatorObserver>	导航观察器
debugShowMaterialGrid	bool	是否显示布局网格，用来调试UI的工具
showPerformanceOverlay	bool	显示性能标签

2.1.1 设置主页

使用home属性设置应用的主页，即整个应用的主组件。

2.1.2 路由处理

routes对象是一个Map<String, WidgetBuilder>。当使用Navigator.pushNamed来跳转路由的时候，通过routes查找路由名字，然后使用对应的WidgetBuilder来构造一个带有页面切换动画的MaterialPageRoute。如果应用只有一个界面，则不用设置整个属性，使用home即可。

2.1.3 自定义主题

应用程序的主题，各种定制的颜色都可以设置，用于程序主题切换。

2.2 Scaffold(脚手架组件)

Scaffold实现了基本的Material Design布局。只要是在Material Design中定义过的单个界面显示的布局组件元素，都可以使用Scaffold来绘制。

常用属性

属性名	类型	说明
appBar	AppBar	显示在界面顶部的一个AppBar
body	Widget	当前界面所显示的主要内容
floatingActionButton	Widget	在Material Design中定义的一个功能按钮
persistentFooterButtons	List< Widget>	固定在下方显示的按钮
drawer	Widget	侧边栏组件
bottomNavigatorBar	Widget	显示在底部的导航栏
backgroudColor	Color	背景颜色
resizeToAvoidBottomPadding	bool	控制界面内容body是否重新布局来避免底部被覆盖，比如当键盘显示时，重新布局避免键盘盖住内容。默认为true

2.3 AppBar(应用按钮组件)

应用按钮组件有AppBar和SliverAppBar。它们是Material D