Row和Column组件均继承于Flex,通过direction参数区别主轴(Main Axis)的方向,Column的主轴为vertical(垂直方向),Row的主轴为horizontal(水平方向)

主轴(Main Axis)决定了子组件的的排列方向,而垂直主轴的即为交叉轴(Cross Axis)

确定了主轴就能设置对齐方式(Alignment),他们都有mainAxisAlignment(主轴对齐方式)属性和crossAxisAlignment(交叉轴对齐方式)属性.

start是轴向的起始点,end是轴向的终点,默认情况都是从左向右,从上到下

使用枚举类MainAxisAlignment的start、end、center、spaceBetween、spaceAround、spaceEvenly的6个值来控制

enum MainAxisAlignment {
  /// Place the children as close to the start of the main axis as possible.
  ///
  /// If this value is used in a horizontal direction, a [TextDirection] must be
  /// available to determine if the start is the left or the right.
  ///
  /// If this value is used in a vertical direction, a [VerticalDirection] must be
  /// available to determine if the start is the top or the bottom.       
  /// 默认值。将所有子组件靠近主轴的起点对齐(Row 在左边,Column 在顶部)
  start,

  /// Place the children as close to the end of the main axis as possible.
  ///
  /// If this value is used in a horizontal direction, a [TextDirection] must be
  /// available to determine if the end is the left or the right.
  ///
  /// If this value is used in a vertical direction, a [VerticalDirection] must be
  /// available to determine if the end is the top or the bottom.
  /// 将所有子组件靠近主轴的终点对齐(Row 在右边,Column 在底部)将所有子组件靠近主轴的终点对齐(Row 在右边,Column 在底部)
  end,

  /// Place the children as close to the middle of the main axis as possible.
  /// 将所有子组件在主轴方向上居中对齐
  center,

  /// Place the free space evenly between the children.
  /// 首尾子组件贴在容器的首尾,剩余空间平均分配在子组件之间。
  spaceBetween,

  /// Place the free space evenly between the children as well as half of that
  /// space before and after the first and last child.
  /// 每个子组件左右/上下两侧的空隙都相等。首尾子组件到容器边缘的距离是子组件之间距离的一半。
  spaceAround,

  /// Place the free space evenly between the children as well as before and
  /// after the first and last child.
  /// 所有子组件平均分配主轴的全部空间。首尾子组件到容器边缘的距离与子组件之间的距离完全相等。
  spaceEvenly;

使用枚举类CrossAxisAlignment的start、end、center、stretch、baseline的5个值来控制

enum CrossAxisAlignment {
  /// Place the children with their start edge aligned with the start side of
  /// the cross axis.
  ///
  /// For example, in a column (a flex with a vertical axis) whose
  /// [TextDirection] is [TextDirection.ltr], this aligns the left edge of the
  /// children along the left edge of the column.
  ///
  /// If this value is used in a horizontal direction, a [TextDirection] must be
  /// available to determine if the start is the left or the right.
  ///
  /// If this value is used in a vertical direction, a [VerticalDirection] must be
  /// available to determine if the start is the top or the bottom.
  /// 将所有子组件靠近交叉轴的起点对齐(Row 在顶部,Column 在左边)。
  start,

  /// Place the children as close to the end of the cross axis as possible.
  ///
  /// For example, in a column (a flex with a vertical axis) whose
  /// [TextDirection] is [TextDirection.ltr], this aligns the right edge of the
  /// children along the right edge of the column.
  ///
  /// If this value is used in a horizontal direction, a [TextDirection] must be
  /// available to determine if the end is the left or the right.
  ///
  /// If this value is used in a vertical direction, a [VerticalDirection] must be
  /// available to determine if the end is the top or the bottom.
  /// 将所有子组件靠近交叉轴的终点对齐(Row 在底部,Column 在右边)。
  end,

  /// Place the children so that their centers align with the middle of the
  /// cross axis.
  ///
  /// This is the default cross-axis alignment.
  /// 默认值。将所有子组件在交叉轴方向上居中对齐。
  center,

  /// Require the children to fill the cross axis.
  ///
  /// This causes the constraints passed to the children to be tight in the
  /// cross axis.
  /// 强制子组件在交叉轴方向上填满父容器。
  stretch,

  /// Place the children along the cross axis such that their baselines match.
  ///
  /// Consider using this value for any horizontal main axis (as with [Row])
  /// where the children primarily contain text.  If the different children
  /// have text with different font metrics (for example because they differ
  /// in [TextStyle.fontSize] or other [TextStyle] properties, or because
  /// they use different fonts due to being written in different scripts),
  /// then this typically produces better visual alignment than the other
  /// [CrossAxisAlignment] values, which use no information about
  /// where the text sits vertically within its bounding box.
  ///
  /// The baseline of a widget is typically the typographic baseline of the
  /// first text in the first [Text] or [RichText] widget it encloses, if any.
  /// The typographic baseline is a horizontal line used for aligning text,
  /// which is specified by each font; for alphabetic scripts, it ordinarily
  /// runs along the bottom of letters excluding any descenders.
  ///
  /// Because baselines are always horizontal, this alignment is intended for
  /// horizontal main axes (as with [Row]). If the main axis is vertical
  /// (as with [Column]), then this value is treated like [start].
  ///
  /// For horizontal main axes, if the minimum height constraint passed to the
  /// flex layout exceeds the intrinsic height of the cross axis, children will
  /// be aligned as close to the top as they can be while honoring the baseline
  /// alignment. In other words, the extra space will be below all the children.
  ///
  /// Children who report no baseline will be top-aligned.
  ///
  /// See also:
  ///
  ///  * [RenderBox.getDistanceToBaseline], which defines the baseline of a box.
  ///  * [IgnoreBaseline], which can be used to ignore a child for the purpose of
  ///    baseline alignment.
  /// 让子组件根据文字的基线对齐(需要设置 textBaseline 属性,如 TextBaseline.alphabetic),
  /// 必须要有文本才有用
  baseline;

Row和Column都是具有自适应特点的(会尽可能撑满屏幕空间,用Container设置固定宽高包裹能够限制大小),原因是mainAxisSize (主轴尺寸)属性。

可以使用枚举类MainAxisSize中的min和max两个值设置。

默认情况是max。尽可能大地占据主轴方向的空间(对于Row 就是父容器的宽度,对于Column就是父容器的高度)。

使用min会根据其子组件的总大小来决定自身大小(刚好包裹所有子组件)。这个值在和 MainAxisAlignment的一些属性(如spaceBetween)一起使用时效果会非常明显。


MainAxis和CrossAxis轴向是可以改变的

Colum的start和end的含义跟轴向有关,verticalDirection (垂直方向)可以改变轴向。

VerticalDirection有up↑(从下往上)和down↓(从上往下)两个值,默认是down。

verticalDirection属性能改变Column主轴的起点和终点位置,即从上往下还是从下往上。它会影响 CrossAxisAlignment.start 和 CrossAxisAlignment.end 的含义。


同样Row的mainAxisAlignment的start 和 end会被textDirection的设置改变轴向,进而改变含义,

textDirection.ltr (从左到右,Left-to-Right) 这是默认值 MainAxisAlignment.start 就会让子组件从左边开始排列。

textDirection.rtl (从右到左,Right-to-Left) MainAxisAlignment.start 就会让子组件从右边开始排列。

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐