基本概念
Flutter Widget采用现代响应式框架构建，这是从 React 中获得的灵感，中心思想是用widget构建你的UI。 Widget描述了他们的视图在给定其当前配 置和状态时应该看起来像什么。当widget的状态发生变化时，widget会重新构建UI，Flutter会对比前后变化的不同， 以确定底层渲染树从一个状态转换 到下一个状态所需的最小更改（译者语：类似于React/Vue中虚拟DOM的diff算法）。
StatelessWidget & StatefulWidget
Material Components
实现了Material Design 指南的视觉、效果、motion-rich的widget。前半部分是App结构、导航和布局，后半部分是基础组件。
Scaffold
Material Design布局结构的基本实现。此类提供了用于显示drawer、snackbar和底部sheet的API。
AppBar
一个Material Design应用程序栏，由工具栏和其他可能的widget（如TabBar和FlexibleSpaceBar）组成。
BottomNavigationBar
底部导航条，可以很容易地在tap之间切换和浏览顶级视图。
TabBar
一个显示水平选项卡的Material Design widget。
TabBarView
显示与当前选中的选项卡相对应的页面视图。通常和TabBar一起使用。
MaterialApp
一个方便的widget，它封装了应用程序实现Material Design所需要的一些widget。
- title ： 在任务管理窗口中所显示的应用名字
- 这个和启动图标名字是不一样的，和当前 Activity 的名字也是不一样的。 这个 Title 是用来定义任务管理窗口界面所看到应用名字的。 在原生 Android 系统中点击圆圈 Home 按钮右边的方块按钮就会打开多任务切换窗口。
- theme ： 应用各种 UI 所使用的主题颜色
- 定义应用所使用的主题颜色，在纸墨设计中定义了 primaryColor、accentColor、hintColor 等颜色值。可以通过这个来指定一个 ThemeData 定义应用中每个控件的颜色。
- color ： 应用的主要颜色值（primary color），也就是安卓任务管理窗口中所显示的应用颜色
- home ： 应用默认所显示的界面 Widget
- 这个是一个 Widget 对象，用来定义当前应用打开的时候，所显示的界面。
- routes ： 应用的顶级导航表格，这个是多页面应用用来控制页面跳转的，类似于网页的网址
定义应用中页面跳转规则。 该对象是一个 Map<String, WidgetBuilder>。 当使用 Navigator.pushNamed 来路由的时候，会在 routes 查找路由名字，然后使用 对应的 WidgetBuilder 来构造一个带有页面切换动画的 MaterialPageRoute。如果应用只有一个界面，则不用设置这个属性，使用 home 设置这个界面即可。
如果 home 不为 null，当 routes 中包含 Navigator.defaultRouteName（’/’） 的时候会出错，两个都是 home 冲突了。
如果所查找的路由在 routes 中不存在，则会通过 onGenerateRoute 来查找。
- initialRoute ：第一个默认显示的路由名字，默认值为 Window.defaultRouteName
- onGenerateRoute ： 生成路由的回调函数，当导航的命名路由的时候，会使用这个来生成界面
- onLocaleChanged ： 当系统修改语言的时候，会触发å这个回调
- navigatorObservers ： 应用 Navigator 的监听器
- debugShowMaterialGrid ： 是否显示 纸墨设计 基础布局网格，用来调试 UI 的工具
- showPerformanceOverlay ： 显示性能标签，https://flutter.io/debugging/#performanceoverlay
- checkerboardRasterCacheImages 、showSemanticsDebugger、debugShowCheckedModeBanner 各种调试开关
Read more: http://blog.chengyunfeng.com/?p=1041#ixzz5QaNaJDNI
WidgetsApp
一个方便的类，它封装了应用程序通常需要的一些widget。
Drawer
从Scaffold边缘水平滑动以显示应用程序中导航链接的Material Design面板。
ListTile
一个固定高度的行，通常包含一些文本，以及一个行前或行尾图标。
Stepper
一个Material Design 步骤指示器，显示一系列步骤的过程
Divider
一个逻辑1像素厚的水平分割线，两边都有填充
RaisedButton
Material Design中的button， 一个凸起的材质矩形按钮
FlatButton
一个扁平的Material按钮
ButtonBar
水平排列的按钮组
FloatingActionButton
一个圆形图标按钮，它悬停在内容之上，以展示应用程序中的主要动作。FloatingActionButton通常用于Scaffold.floatingActionButton字段。
IconButton
一个Material图标按钮，点击时会有水波动画
PopupMenuButton
当菜单隐藏式，点击或调用onSelected时显示一个弹出式菜单列表
Switch
On/off 用于切换一个单一状态
Slider
滑块，允许用户通过滑动滑块来从一系列值中选择。
SimpleDialog
简单对话框可以显示附加的提示或操作
AlertDialog
一个会中断用户操作的对话款，需要用户确认
BottomSheet
BottomSheet是一个从屏幕底部滑起的列表（以显示更多的内容）。你可以调用showBottomSheet()或showModalBottomSheet弹出
ExpansionPanel
Expansion panels contain creation flows and allow lightweight editing of an element. The ExpansionPanel widget implements this component.
SnackBar
具有可选操作的轻量级消息提示，在屏幕的底部显示。
Chip
标签，一个Material widget。 它可以将一个复杂内容实体展现在一个小块中，如联系人。
Tooltip
一个文本提示工具，帮助解释一个按钮或其他用户界面，当widget长时间按下时（当用户采取其他适当操作时）显示一个提示标签。
LinearProgressIndicator
一个线性进度条，另外还有一个圆形进度条CircularProgressIndicator
Cupertino (iOS风格) Widgets
CupertinoActivityIndicator
一个iOS风格的loading指示器。显示一个圆形的转圈菊花
CupertinoAlertDialog
iOS风格的alert dialog.
CupertinoButton
iOS风格的button.
CupertinoDialog
iOS风格的对话框
CupertinoDialogAction
通常用于CupertinoAlertDialog的一个button
CupertinoSlider
从一个范围中选一个值.
CupertinoSwitch
iOS风格的开关. 用于单一状态的开/关
CupertinoPageTransition
提供iOS风格的页面过度动画
CupertinoFullscreenDialogTransition
一个iOS风格的过渡，用于调用全屏对话框。
CupertinoNavigationBar
iOS风格的导航栏. 通常和CupertinoPageScaffold一起使用。
CupertinoTabBar
iOS风格的底部选项卡。 通常和CupertinoTabScaffold一起使用。
CupertinoPageScaffold
一个iOS风格的页面的基本布局结构。包含内容和导航栏
CupertinoTabScaffold
标签式iOS应用程序的结构。将选项卡栏放在内容选项卡之上
CupertinoTabView
支持选项卡间并行导航项卡的根内容。通常与CupertinoTabScaffolde一起使用
布局 Widget
Container
Container 可让您创建矩形视觉元素。container 可以装饰为一个 BoxDecoration, 如 background、一个边框、或者一个阴影。 Container 也可以具有边距（margins）、填充(padding)和应用于其大小的约束(constraints)。 另外， Container可以使用矩阵在三维空间中对其进行变换。
Row
在水平方向上排列子widget的列表。Row & Column ，这些具有弹性空间的布局类Widget可让您在水平（Row）和垂直（Column）方向上创建灵活的 布局。其设计是基于web开发中的Flexbox布局模型。
Column
在垂直方向上排列子widget的列表。
Stack
取代线性布局 (译者语：和Android中的LinearLayout相似)，Stack 允许子 widget 堆叠， 你可以使用 Positioned 来定位他们相对于Stack的上下左右四条边的位置。Stacks 是基于Web开发中的绝度定位（absolute positioning )布局模型设计的。
IndexedStack
从一个子widget列表中显示单个孩子的Stack
Flow
一个实现流式布局算法的widget
Table
为其子widget使用表格布局算法的widget
Wrap
可以在水平或垂直方向多行显示其子widget。
ListBody
一个widget，它沿着一个给定的轴，顺序排列它的子元素
ListView
可滚动的列表控件。ListView是最常用的滚动widget，它在滚动方向上一个接一个地显示它的孩子。在纵轴上，孩子们被要求填充ListView。 对于少量固定的子元素，可以直接一次性全部渲染，对于大量子元素的list，则需要使用build方法：
// 少量的List元素可以一次性渲染
new ListView(
children: <Widget>[
new ListTile(
leading: new Icon(Icons.map),
title: new Text('Map'),
),
new ListTile(
leading: new Icon(Icons.photo),
title: new Text('Album'),
),
new ListTile(
leading: new Icon(Icons.phone),
title: new Text('Phone'),
),
],
),
// 大量子元素的时候要使用build方法：
new ListView.builder(
// item数量
itemCount: widget.items.length,
itemBuilder: (context, index) {
return new ListTile(
title: new Text('${widget.items[index]}'),
);
},
),
CustomMultiChildLayout
使用一个委托来对多个孩子进行设置大小和定位的小部件
Padding
一个widget, 会给其子widget添加指定的填充
Center
将其子widget居中显示在自身内部的widget
Align
一个widget，它可以将其子widget对齐，并可以根据子widget的大小自动调整大小。
Baseline
根据子项的基线对它们的位置进行定位的widget。
FittedBox
按自己的大小调整其子widget的大小和位置。
AspectRatio
一个widget，试图将子widget的大小指定为某个特定的长宽比
ConstrainedBox
对其子项施加附加约束的widget
FractionallySizedBox
一个widget，它把它的子项放在可用空间的一小部分。关于布局算法的更多细节，见RenderFractionallySizedOverflowBox
IntrinsicHeight
一个widget，它将它的子widget的高度调整其本身实际的高度
IntrinsicWidth
一个widget，它将它的子widget的宽度调整其本身实际的宽度
LimitedBox
一个当其自身不受约束时才限制其大小的盒子
Offstage
一个布局widget，可以控制其子widget的显示和隐藏。
OverflowBox
对其子项施加不同约束的widget，它可能允许子项溢出父级。
SizedBox
一个特定大小的盒子。这个widget强制它的孩子有一个特定的宽度和高度。如果宽度或高度为NULL，则此widget将调整自身大小以匹配该维度中的孩子的大小。
SizedOverflowBox
一个特定大小的widget，但是会将它的原始约束传递给它的孩子，它可能会溢出。
Transform
在绘制子widget之前应用转换的widget。
CustomSingleChildLayout
一个自定义的拥有单个子widget的布局widget
Theme
将主题应用于子widget。主题描述了应用选择的颜色和字体。
MediaQuery
建立一个子树，在树中媒体查询解析不同的给定数据
可滚动的Widget
滚动一个拥有多个子组件的父组件
ListView
NestedScrollView
一个可以嵌套其它可滚动widget的widget
GridView
一个可滚动的二维空间数组
SingleChildScrollView
有一个子widget的可滚动的widget，子内容超过父容器时可以滚动。
Scrollable
实现了可滚动widget的交互模型，但不包含UI显示相关的逻辑
Scrollbar
一个Material Design 滚动条，表示当前滚动到了什么位置
CustomScrollView
一个使用slivers创建自定义的滚动效果的ScrollView
NotificationListener
一个用来监听树上冒泡通知的widget。
ScrollConfiguration
控制可滚动组件在子树中的表现行为
RefreshIndicator
Material Design下拉刷新指示器，包装一个可滚动widget
基本元素组件
Text
该 widget 可让创建一个带格式的文本。
RichText
一个富文本Text，可以显示多种样式的text。
DefaultTextStyle
文字样式，用于指定Text widget的文字样式
Image
一个显示图片的widget
显示网络图片
- 可以是静态图片
new Image.network( 'https://raw.githubusercontent.com/NorthFacing/adolphor/gh-pages/image/post/2018/09/09/demo_senlin.jpg', ), - 也可以是gif动态图片
new Image.network( 'https://raw.githubusercontent.com/NorthFacing/adolphor/gh-pages/image/post/2018/09/09/demo_coffee.gif', ),
- 可以是静态图片
RawImage
一个直接显示dart:ui.Image的widget
3th - FadeInImage
需要增加依赖包，在添加如下依赖：
transparent_image: ^0.1.0
之后运行如下指令：
flutter packages get
按照如下方式使用即可：
new FadeInImage.memoryNetwork(
placeholder: kTransparentImage,
image: 'https://raw.githubusercontent.com/NorthFacing/adolphor/gh-pages/image/post/2018/09/09/demo_senlin.jpg',
),
Icon
A Material Design icon.
AssetBundle
包含应用程序可以使用的资源，如图像和字符串。对这些资源的访问是异步，所以他们可以来自网络（例如，从NetworkAssetBundle）或从本地文件系统， 这并不会挂起用户界面。
FlutterLogo
Flutter logo, 以widget形式. 这个widget遵从IconTheme。
Form
一个可选的、用于给多个TextField分组的widget
FormField
一个单独的表单字段。此widget维护表单字段的当前状态，以便在UI中直观地反映更新和验证错误。
RawKeyboardListener
每当用户按下或释放键盘上的键时调用回调的widget。
Placeholder
一个绘制了一个盒子的的widget，代表日后有widget将会被添加到该盒子中
TextField
文本输入框
Checkbox
复选框，允许用户从一组中选择多个选项。
Radio
单选框，允许用户从一组中选择一个选项。
showDatePicker
日期&时间选择器
Card
一个 Material Design 卡片。拥有一个圆角和阴影
DataTable
数据表显示原始数据集。它们通常出现在桌面企业产品中。DataTable Widget实现这个组件
交互模型Widget
LongPressDraggable
可以使其子widget在长按时可拖动
GestureDetector
一个检测手势的widget
DragTarget
一个拖动的目标widget，在完成拖动时它可以接收数据
Dismissible
可以在拖动时隐藏的widget
IgnorePointer
在hit test中不可见的widget。当ignoring为true时，此widget及其子树不响应事件。但它在布局过程中仍然消耗空间，并像往常一样绘制它的孩子。 它是无法捕获事件对象、因为它在RenderBox.hitTest中返回false
AbsorbPointer
在hit test期间吸收(拦截)事件。当absorbing为true时，此小部件阻止其子树通过终止命中测试来接收指针事件。它在布局过程中仍然消耗空间， 并像往常一样绘制它的孩子。它只是防止其孩子成为事件命中目标，因为它从RenderBox.hitTest返回true。
Navigator
导航器，可以在多个页面(路由)栈之间跳转。
Scrollable
动画&Motion Widget
在您的应用中使用动画。查看Flutter中的动画总览
绘制和视觉效果Widget
Widget将视觉效果应用到其子组件，而不改变它们的布局、大小和位置。
Async
Flutter应用的异步模型
FutureBuilder
基于与Future交互的最新快照来构建自身的widget
StreamBuilder
基于与流交互的最新快照构建自身的widget
参考资料
文档信息
- 本文作者：Bob.Zhu
- 本文链接：https://adolphor.github.io/2018/09/09/layout-widget-of-flutter/
- 版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）