flutter之弹性布局Flex

flutter

1.基本概念

弹性布局表示允许子widget按照一定比例来分配父容器的空间；如果你知道主轴方向，那么使用Row/Column会更加方便一些，因为这两者也都是继承自Flex的。下面我们可以看看Flex的基本定义，在前面Row和Column中提到过的属性这里就不提了：

1
2
3
4
Flex({
    ...
    @required this.direction, // 弹性布局方向，对于Row来说默认就是水平方向；对于Column来说默认就是垂直方向。
});

2.新概念-Expanded

可以按照比例来扩伸Row，Column和Flex子Widget所占用的空间。下面可以看看它的构造函数：

1
2
3
4
const Expanded({
    int flex = 1,
    @required Widget child
});

flex为弹性系数，如果为0或者null的话，则child是没有弹性的，此时不会扩伸占用的空间。如果大于0，所有的Expanded将会按照其flex的比例来分割主轴的全部空闲空间。

3.流式布局

对于Row和Column来说，如果子widget超出屏幕范围，则会报溢出错误，因为Row默认只能显示一行，如果超出屏幕的话并不会折行。在Flutter中，把超出屏幕显示范围会自动折行的布局叫做流失布局，具体通过Wrap和Flow这两个widget来进行支持。

4.布局类和容器类

布局类一般接受一个widget数组（children)，而容器类一般只接受一个子Widget（child)。