[flutter]什么是MaterialApp和Material design

MaterialApp是什么，主要包含哪些元素？

MaterialApp使用material design的app组件，它是基于WidgetsApp的。那么，什么是material design呢？

material design是google设计的一套界面设计语言，简单来说，这是方便UI设计师们设计UI的一种语言。google为了开发者能更方便地开发出符合material design的app，于是封装了一些符合material design的组件库，通常一个符合material design的app有以下组件（参考其他博客筛选出一些我认为比较重要的组件）：

1. 悬浮球（FAB）

悬浮球可能是 Material Design 中最明显的标志了。一个圆圆的小球固定在屏幕的某个位置（通常在屏幕的右下角并且常驻屏幕），它特别显眼，让你无法忽视它。同时它也是当前页面最重要的主线操作，比如在邮箱的页面中，FAB 很可能是发邮件的按钮。并且一个页面中只有一个 FAB，这让这个小球更加显眼了。

FAB是一个页面中最显眼的设计，但并不是每个页面都需要FAB。

2. 底部应用栏（App bars: bottom）

底部应用栏用于显示屏幕底部的导航和按键操作。底部应用栏比较类似 iOS设计中的 Tab栏，但是不同于Tab栏的是底部应用栏通常不会等分为几份，而是放置一些 FAB、导航等的功能性图标，并且讲究排版的节奏感。

底部应用栏上的图标必须为2个以上（不算FAB）

底部应用栏由以下部分组成：①容器；②导航抽屉控制；③浮动操作按钮（FAB）；④动作图标；⑤更多菜单控件。

 

3.顶部应用栏（App bars: top）

顶部应用栏和我们 iOS 中所使用的导航栏很类似，但不完全一样。顶部应用栏中标题并非居中而是像报纸一样左对齐的，这是因为 Material Design 认为阅读应该如在报纸上一样按照从左到右的顺序排列。并且图标左侧最多可放置一个系统图标，右侧可放置多个系统图标。

顶部应用栏所包含的组成部分：①顶部栏容器；②抽屉式导航图标（可选）；③ 标题（可选）；④系统图标（可选） ；⑤更多按钮（可选）。

 

4 横幅（Banner）

横幅可不光是广告哦，横幅是顶部栏下面的第一个凸显区域，显示突出的消息和相关的可选操作。它可以是一个对话，也可以是一个提示或者包含图形的设计。

 5. 底部导航（Bottom navigation）

底部导航的设计和 iOS 类似，它也是将底部宽度等分为多个图标的点击区域，并且配以辅助文字信息方便用户理解图标背后的功能。底部导航是底部应用栏的一个有力补充。

6. 卡片式设计（Cards）

卡片式设计同样是 Material Design 的显著标志。其实卡片式设计我们可以理解为一个小的单元，在这个单元里的信息逻辑关系更加紧密。如果一个单元的信息过多很容易让用户在阅读时发生串行现象，卡片式设计就能有效地规避这个问题。

卡片式设计包含以下组成部分：①容器卡容器。它容纳所有卡元素，容器的尺寸由元素占据的空间决定。②缩略图（可选）。缩略图可以放置头像、图标和logo。③标题文字（可选）。标题文字通常是卡片中最重要的标题，一般文字较大。④小标题（可选）。小标题可以放置文章署名或标记位置等信息。⑤多媒体（可选）。卡片可以包括各种媒体，包括照片和视频等。⑥辅助文字（可选）。通常是对于多媒体的描述信息。⑦按钮（可选）。8.图标（可选）。

7.抽屉式导航（Navigation drawer）

抽屉式导航的组成

①容器（可选）；②头部（可选），通常为用户个人信息；③分割线（可选）；④选中态；⑤选中态的文本；⑥没有激活的文本；⑦小标题；⑧ 底层界面（不可操作）。

关于Material design还有布局部分，不过flutter内置的脚手架组件会自动帮我们排版布局，所以我们只需要了解Material design有哪些重要的组件即可。