Flutter学习笔记 - 布局基础

Row and Column 是 Flutter 世界非常重要的两个 widgets。 

Row和Column

1. 主轴空间

Row 的主轴是指水平方向的轴，Column 的主轴是指竖直方向的轴

属性： mainAxisSize

它决定了此 Row 沿着水平方向占用空间的大小。默认情况下，mainAxisSize 的值为 MainAxisSize.max， 这意味着 Row 将会占用所有可用的水平方向空间。你可以使用 MainAxisSize.min 实现让一个 Row 占用尽可能少的空间。

2. 主轴对齐

属性：mainAxisAlignment

当mainAxisSize设置为最小值，children之外则不会有更多的空间，反之当mainAxisSize设置为最大值时，Row就会有更多的空间，此时可以使用mainAxisAlignment属性来控制Row中的children对齐方式。

3. 交叉轴对齐

属性：crossAxisAlignment

Row widgets 的交叉轴是竖直方向的轴， 你可以用 crossAxisAlignment 属性来控制 children 如何在垂直方向排列。默认值是 CrossAxisAlignment.center，一共有五种值：

1）CrossAxisAlignment.start。将所有的 children 向 Row 竖直方向的 start 方向排列（如果是从上到下，你可以修改 verticalDirection 来改变）。

2）CrossAxisAlignment.end。将所有的 children 向 Row 竖直方向的 end 方向排列（默认是底部）。

3）CrossAxisAlignment.center。将 children 聚在 Row 竖直方向轴的中间位置。默认值

4）CrossAxisAlignment.stretch。所有的 Children 的高度会被拉伸到和 Row 一样，填满竖直方向轴的空间。

5）CrossAxisAlignment.baseline。所有的 Children 的 baselines 在竖直方向对齐。注意：此时设置该属性会报错，下一节就会介绍原因。

4. 基线对齐

属性：textBaseline

值：alphabetic, ideographic, values

这个属性我感觉没有特别理解，只知道它应该是与CrossAxisAlignment.baseline属性结合使用的，可以指定某种基线来对齐。注意：此时设置该属性值为values时会报错。

5. 可伸缩 children

首先，Row 首先会要求它所有的 children 想要多大的尺寸。

然后，它会计算主轴（水平）的剩余空间。

然后它把剩下的空间根据 children 的 flex 值分给它的可伸缩的 children， 这些可伸缩的 children 可以使用他们提供的部分或者全部的空间。

在那时， Row 知道所有的 children 的尺寸有多大，然后可以根据你之前学到的 axis size 和 alignment 属性来排列它们。

Flexibles

属性：

1. flex，决定与其他 children 相比可占用剩余空间的多少

2. fit ，决定 其 child 是否占用所有额外的空间，值：FlexFit.loose，FlexFit.tight

Row 的所有用法和 Column 是一样的，只是维度不同。