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 是一样的,只是维度不同。