布局控件
统计了一部分控件，做了一个表格：
| widget | flutter |
|---|---|
| 弹性布局 | Flex |
| 水平线性布局 | Row |
| 垂直线性布局 | Column |
| 表格布局 | Table |
| 流式布局 | Flow |
| 包裹布局 | Wrap |
| 页面视图布局 | PageView |
| 堆叠布局 | Stack |
| 索引堆叠布局 | IndexedStack |
| 可延伸容器 | Expanded |
| 容器 | Container |
| 边距容器 | Padding |
| 卡片容器 | Card |
| 对齐容器 | Align |
| 居中容器 | Center |
| 变换容器 | Transform |
| 显隐容器 | Offstage |
| 基线容器 | Baseline |
| 比例容器 | AspectRatio |
| 部分尺寸容器 | FractionallySizedBox |
ps: 这里的布局指的是内部可以存放多个孩子，容器只能有一个孩子
这些控件使用起来和css非常类似
我们先了解margin和padding的概念
box-model
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像
接下来以水平线性布局Row为例，进行说明：
先来看Row的源码：
class Row extends Flex {
Row({
Key key,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
MainAxisSize mainAxisSize = MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
TextDirection textDirection,
VerticalDirection verticalDirection = VerticalDirection.down,
TextBaseline textBaseline,
List<Widget> children = const <Widget>[],
}) : super(
children: children,
key: key,
direction: Axis.horizontal,
mainAxisAlignment: mainAxisAlignment,
mainAxisSize: mainAxisSize,
crossAxisAlignment: crossAxisAlignment,
textDirection: textDirection,
verticalDirection: verticalDirection,
textBaseline: textBaseline,
);
}
使用起来很简单，只需传递一个List<Widget>就可以了
关于MainAxisAlignment(主要对齐方式)这个属性类似于css中的justify-content属性，其默认是居中的
| MainAxisAlignment | 作用 | 效果 |
|---|---|---|
start |
位于容器的开始位置 |  |
end |
位于容器的结束位置 |  |
center |
位于容器的中心 |  |
spaceBetween |
头尾无空白，各行之间均匀空白间隙 |  |
spaceAround |
头尾的只有一半，各行之间均匀空白间隙 |  |
spaceEvenly |
头尾和各行之间均匀空白间隙 |  |
而mainAxisSize仅2个值，当指定为MainAxisSize.min,MainAxisAlignment是无法生效的
然后是CrossAxisAlignment（纵轴方向对齐）这个属性类似于css中的align-items属性，其默认是居中的
| CrossAxisAlignment | 作用 | 效果 |
|---|---|---|
| start | 纵轴起始位置的边界紧靠住该行的侧轴起始边界 |  |
| end | 纵轴起始位置的边界紧靠住该行的侧轴结束边界 |  |
| center | 纵轴上居中放置 |  |
| stretch | 拉伸，尺寸尽可能接近所在行的尺寸 |  |
| baseline | 参与基线对齐 |  |
注：
-
Row使用stretch必须自控件没有指定实际的高度,Cloumn则对应宽度 -
Row在上一层控件（父控件）未指定宽高时，默认宽度是最大的（match_parent），高度则是适应子控件的大小（wrap_content），Column反之 -
TextDirection与MainAxisAlignment对应，VerticalDirection和CrossAxisAlignment对应 -
Expanded布局相当于android中linearLayout中的weight,可指定占有比例
一些其他的概念
BoxConstraints存放宽高的约束
static const double infinity = 1.0 / 0.0;
const BoxConstraints({
this.minWidth = 0.0,
this.maxWidth = double.infinity,
this.minHeight = 0.0,
this.maxHeight = double.infinity
});
Alignment 对齐,百分比
const Alignment(this.x, this.y)
static const Alignment topLeft = Alignment(-1.0, -1.0);
static const Alignment topCenter = Alignment(0.0, -1.0);
static const Alignment topRight = Alignment(1.0, -1.0);
static const Alignment centerLeft = Alignment(-1.0, 0.0);
static const Alignment center = Alignment(0.0, 0.0);
static const Alignment centerRight = Alignment(1.0, 0.0);
static const Alignment bottomLeft = Alignment(-1.0, 1.0);
static const Alignment bottomCenter = Alignment(0.0, 1.0);
static const Alignment bottomRight = Alignment(1.0, 1.0);
EdgeInsets边距（Padding和Margin使用这个）
const EdgeInsets.fromLTRB(this.left, this.top, this.right, this.bottom);
Offset偏移量，存放偏移的x，y坐标（动画移动，点击位置都用这个类）
const Offset(double dx, double dy) : super(dx, dy);
Size 尺寸，存放宽高
const Size(double width, double height) : super(width, height);
factor 比例，与子控件有关（放大或缩小）
小结一下
布局方面没什么好说的，多用用就会了。大部分布局都需要滚动的，这时候一般都是外层包裹一个ListView
小尾巴：文章有错误的地方请不吝指出，会及时更改
