Row/Col

Row与Col都有这些属性，使用起来只是方向不同

images images

MainAxisSize

主轴的可用空间大小

min:主轴上可以分配的最小空间，由子元素的布局约束决定
max:主轴上可以分配的最大空间

mainAxisAlignment and crossAxisAlignment

对于行，主轴水平运行，横轴垂直运行。对于列，主轴垂直运行，横轴水平运行。

mainAxisAlignment

假设TextDirection是ltr（文字从左向右读）

start: 居左
end：居右
center：居中
spaceBetween:将主轴方向上的空白区域均分，使得children之间的空白区域相等，首尾child都靠近首尾，没有间隙；
spaceAround：将主轴方向上的空白区域均分，使得子元素之间的空白区域相等，但是首尾child的空白区域为1/2
spaceEvenly：将主轴方向上的空白区域均分，使得children之间的空白区域相等，包括首尾child；

crossAxisAlignment

假设VerticalDirection是down

start: 居上
end：居下
center：居中
stretch：让children填满竖轴方向
baseline：使得children的baseline对齐，在对齐文字时候比较游泳。尤其是一行中有不同大小的文字，那么可以使用baseline对齐.

BASELINE

Stack

Stack可以理解为Material风格在z轴方向的堆叠下面是三个不同大小颜色的SizeBox层叠。

 return Stack(
        alignment: _alignmentDirectional,
        children: &lt;Widget&gt;[
          SizedBox(
            width: 300.0,
            height: 300.0,
            child: Container(
              color: Colors.green,
            ),
          ),
          SizedBox(
            width: 200.0,
            height: 200.0,
            child: Container(
              color: Colors.yellow,
            ),
          ),
          SizedBox(
            width: 100.0,
            height: 100.0,
            child: Container(
              color: Colors.red,
            ),
          ),
        ],
      );

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

stack

Expanded

Expanded组件可以使Row、Column、Flex等子组件在其主轴方向上展开并填充可用空间(例如，Row在水平方向，Column在垂直方向)。如果多个子组件展开，可用空间会被其flex factor(表示扩展的速度、比例)分割。

Expanded组件必须用在Row、Column、Flex内，并且从Expanded到封装它的Row、Column、Flex的路径必须只包括StatelessWidgets或StatefulWidgets组件(不能是其他类型的组件，像RenderObjectWidget，它是渲染对象，不再改变尺寸了，因此Expanded不能放进RenderObjectWidget)。

Widget _buildContent() {
    return Container(
      child: Column(
        children: [
          _buildBox(points: 16, color: Colors.red),
          Expanded(
            flex: 16,
            child: Row(
              children: [
                _buildBox(points: 8, color: Colors.indigo),
                Expanded(
                  flex: 8,
                  child: Column(
                    children: [
                      Expanded(
                        flex: 4,
                        child: Row(
                          children: [
                            Expanded(
                              flex: 2,
                              child: Column(
                                children: [
                                  _buildBox(points: 1, color: Colors.green),
                                  _buildBox(points: 1, color: Colors.blue),
                                ],
                              ),
                            ),
                            _buildBox(points: 2, color: Colors.brown),
                          ],
                        ),
                      ),
                      _buildBox(points: 4, color: Colors.purple),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildBox({int points, Color color, Color textColor = Colors.white}) {
    return Expanded(
      flex: points,
      child: Container(
        constraints: BoxConstraints.expand(),
        color: color,
        child: Center(
          child: Text(
            '$points',
            style: TextStyle(fontSize: 32.0, color: textColor),
          ),
        ),
      ),
    );
  }

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

expanded

参考资料

https://flutterchina.club/tutorials/layout/#common-layout-widgets

# Row/Col

# MainAxisSize

# mainAxisAlignment and crossAxisAlignment

# mainAxisAlignment

# crossAxisAlignment

# Stack

# Expanded

# 参考资料