# 线性布局

本文作者：阳九五 (opens new window)

本站地址：https://blog.56321654.xyz (opens new window)

# Row 和 Column

横列(Row): 可将多个子组件沿水平直的"横坐标轴"方向排列。
竖列(Column): 可将多个子组件沿着垂直的"纵坐标轴"方向排列。

由于它们需要同时排列多个子组件，所以嵌套子组件的参数不是child，二十复数形式children。

# 定义

Column({
    Key key,

    // * 子元素集合
    List<Widget> children = const <Widget>[],

    // 主轴方向上的对齐方式
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    // 在主轴方向占有空间的值，默认是max
    MainAxisSize mainAxisSize = MainAxisSize.max,

    // 在交叉轴方向的对齐方式
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,

    // 子组件的排列顺序
    VerticalDirection verticalDirection = VerticalDirection.down,

    // 文本的方向
    TextDirection textDirection,
    // 文本基线
    TextBaseline textBaseline,
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

MainAxisAlignment
主轴属性：主轴方向上的对齐方式

enum MainAxisAlignment {
  // 按照主轴起点对齐，例如：按照靠近最左侧子元素对齐
  start,

  // 将子元素放置在主轴的末尾，按照末尾对齐
  end,

  // 子元素放置在主轴中心对齐
  center,

  // 将主轴方向上的空白区域均分，使得子元素之间的空白区域相等，首尾子元素都靠近首尾，没有间隙。有点类似于两端对齐
  spaceBetween,

  // 将主轴方向上的空白区域均分，使得子元素之间的空白区域相等，但是首尾子元素的空白区域为1/2
  spaceAround,

  // 将主轴方向上的空白区域均分，使得子元素之间的空白区域相等，包括首尾子元素
  spaceEvenly,
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

CrossAxisAlignment
交叉属性：在交叉轴方向的对齐方式

enum CrossAxisAlignment {
  // 子元素在交叉轴上起点处展示
  start,

  // 子元素在交叉轴上末尾处展示
  end,

  // 子元素在交叉轴上居中展示
  center,

  // 让子元素填满交叉轴方向
  stretch,

  // 在交叉轴方向，使得子元素按照baseline对齐
  baseline,
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

MainAxisSize
在主轴方向子元素占有空间的方式

enum MainAxisSize {
  // 根据传入的布局约束条件，最大化主轴方向占用可用空间，也就是尽可能充满可用宽度
  max,

  // 与max相反，是最小化占用主轴方向的可用空间
  min,
}

1
2
3
4
5
6
7

# 例子

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.amber,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          // mainAxisSize: MainAxisSize.min,
          children: const [
            FlutterLogo(
              size: 24,
            ),
            FlutterLogo(
              size: 48,
            ),
            FlutterLogo(
              size: 128,
            ),
            FlutterLogo(
              size: 200,
            ),
          ],
        ),
      ),
    );
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27