Flutter开发之布局-1-Column（15）_flutter center上下位置

布局对于移动开发来说，是开发页面的第一步，只有掌握了布局，才能做到心里明白，才能更好、更巧妙的布局。我iOS 一点点的从demo 实践中学习Flutter布局。避免不了从iOS 的布局角度尝试，但是发现Flutter 更iOS 区别很大，Flutter 的布局和安卓、H5的布局非常相似。我只能一点一点的琢磨学习。根据一篇写的不错的文章，加深理解。

Column

1、mainAxisAlignment：主轴布局方式，column主轴方向是垂直的方向

默认值：MainAxisAlignment.start：

1. start ，沿着主轴方向(垂直方向)顶部对齐；

2. end，沿着主轴方向(垂直方向)底部对齐；

3. center，沿着主轴方向(垂直方向)居中对齐；

4. spaceBetween ，沿着主轴方向(垂直方向)平分剩余空间；

5. spaceAround，把剩余空间平分成n份，n是子widget的数量，然后把其中一份空间分成2份，放在第一个child的前面，和最后一个child的后面；

6. spaceEvenly，把剩余空间平分n+1份，然后平分所有的空间，请注意和spaceAround的区别；

2、crossAxisAlignment: 交叉轴的布局方式，对于column来说就是水平方向的布局方式

默认值：CrossAxisAlignment.center，默认是水平居中

1. start ，垂直主轴方向(水平方向)左侧对齐；

2. end，垂直主轴方向(水平方向)右侧对齐；

3. center，垂直主轴方向(水平方向)居中对齐；

4. stretch ，垂直主轴方向(水平方向)拉伸子child；

5. baseline，这个要和textBaseline一起使用，；

3、verticalDirection：就是子child的垂直布局方向，向上还是向下

new Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.center,
          verticalDirection: VerticalDirection.down,
          // textDirection:,
          textBaseline: TextBaseline.alphabetic,
          children: <Widget>[
            Container(
              color: Colors.red,
              height: 30,
              width: 30,
            ),
            Container(
              color: Colors.blue,
              height: 30,
              width: 30,
            ),
            Container(
              color: Colors.yellow,
              height: 30,
              width: 30,
            ),
          ],
        ),
      ),
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

默认值：VerticalDirection.down 也就是从上到下的布局

down ，从上向下布局，上图示例我的代码是红、蓝、黄；
up，反过来从下向上布局，反过来就是黄、蓝、红；

认真揣摩它的奥妙，慢慢的就能掌握和iOS 一样的布局了！漫漫Flutter 布局路啊！
 

编辑参看 作者：liu_520
链接：https://www.jianshu.com/p/1d003ab6c278