Flutter的Row和Column组件
Row和Column组件均继承于Flex,通过direction参数区别主轴(Main Axis)的方向,Column的主轴为vertical(垂直方向),Row的主轴为horizontal(水平方向)Row和Column都是具有自适应特点的(会尽可能撑满屏幕空间,用Container设置固定宽高包裹能够限制大小),原因是mainAxisSize (主轴尺寸)属性。同样Row的mainAxisAl
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 就会让子组件从右边开始排列。
更多推荐
所有评论(0)