最近在学习Flutter，在这里把学的的一些记录记下来，当做是自己的笔记吧；
Flutter 是谷歌的移动UI框架，可以快速的再iOS和Android上构建高质量的原生用户界面。Flutter可以与现有的代码一起工作；而且随着Flutter的成熟被越来越多的开发者和公司所接受，而且Flutter是完全免费、开源的；
Flutter的布局
Flutter引用了大量的Web开发知识，比如FlexBox布局方式，盒模型等，这些引用了CSS的一些思想。所以从UI界面的实现角度来说，只要对Web的布局有些了解，加上对Dart语言熟悉就能轻松的上手Flutter的布局代码编写；
下表示布局时所用到的组件以及装饰组件的说明
| 组件名称 | 中文名称 | 简单说明 |
|---|---|---|
| Align | 对齐布局 | 指定child的对齐方式 |
| AspectRatio | 调整宽高比 | 根据设定的宽高比调整child |
| Baseline | 基准线布局 | 所有child所在的同意条水平线 |
| Center | 居中布局 | child处于水平和垂直方向的中间位置 |
| Column | 垂直布局 | 对child在垂直方向进行排列 |
| ConstrainedBox | 限定宽高 | 限定child的最大值 |
| Container | 容器布局 | 容器布局是一个组合的widget，包含定位和尺寸 |
| FittedBox | 缩放布局 | 缩放以及位置调整 |
| FractionllySizedBox | 百分比布局 | 根据现有的空间按照百分比调整child的尺寸 |
| GridView | 网络布局 | 对多行多列同时进行布局 |
| IndexedStack | 栈索引布局 | IndexedStack继承自Stack，显示第index个child，其他child都是不可见的 |
| LimitedBox | 限定宽高布局 | 对最大宽高进行限制 |
| ListView | 列表布局 | 用列表方式进行布局，比如多项数据的场景 |
| Offstage | 开关布局 | 控制是否显示组件 |
| OverflowBox | 溢出父容器显示 | 允许child超出父容器的范围显示 |
| Padding | 填充布局 | 处理容器与child之间的间距 |
| Row | 水平布局 | 对child在水平方向进行排列 |
| SizedBox | 设置具体尺寸 | 用一个特定大小的盒子来限定child的宽度和高度 |
| Stack/Alignment | Alignment栈布局 | 根据Alignment组件的属性将child定位在Stack组件上 |
| Stack/Positioned | Positioned栈布局 | 根据Positioned组件的属性将child定位在Stack组件上 |
| Table | 表格布局 | 使用表格的行和列进行布局 |
| Transform | 矩阵转换 | 做矩阵变换，对child做评议、旋转、缩放等操作 |
| Wrap | 按宽高自动换行 | 按宽度或者高度，让child自动换行布局 |
下面我就记录一下几种比较常用的布局方式：Row、Column、Stack；
Row --- 水平布局
水平布局是一种常用的布局方式，主要Row组件来实现子组件在水平方向的排列，其中常见的属性如下：
- mainAxisAlignment： 其类型是MainAxisAlignment，是主轴的排列方式；
- crossAxisAlignment： 其类型是CrossAxisAlignment, 次轴的排列方式；
- mainAxisSize： 其类型是MainAxisSize，主轴应该占据多少空间。取值max为最大，min为最小；
- children： 其类型是元素为widget的List类型，组件子元素，她的本质是一个List列表；
对于Row来说，水平方向是主轴，垂直方向是次轴，如图
Row
Column --- 垂直布局
垂直布局也是一种常用的布局方式，与Row组件的区别在于Column组件主要是用来实现子组件在垂直方向的排列，垂直方向为主轴，水平方向为次轴，其常见属性与Row一样，示例图为：
Colunm
Stack --- 层级布局
Stack组件的每一个组件要么定位要么不定位，定位的子组件是用Positioned组件包裹的。Stack组件本身包含所有不定位的子组件，子组件根据alignment属性定位（默认为左上角）。然后根据定位的子组件的top、right、bottom和left属性将它们放置在Stack组件上，Stack的主要属性如下：
- alignment : 类型（AlignmentGeometry），默认值是Alignment.topLeft,其定位位置有一下几种：
- bootomCenter:底部中间位置。
- bootomLeft：底部左侧位置。
- bootomRight:底部右侧位置。
- center:正中间位置。
- centerLeft:中间居左位置。
- centerRight:中间居右位置。
- topCenter:上部居中位置。
- topLeft:上部居左位置。
- topRight:上部居右位置。
