flutter布局-1-column

Column

从今开始连载了，先来介绍下经常使用的不经常使用的widgets，从最简单的column开始。

一、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的区别；

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

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

1. start ，垂直主轴方向(水平方向)左侧对齐；
2. end，垂直主轴方向(水平方向)右侧对齐；
3. center，垂直主轴方向(水平方向)居中对齐；
4. stretch ，垂直主轴方向(水平方向)拉伸子child；
5. baseline，这个要和textBaseline一块儿使用，；

三、textBaseline：字体的基线（基线这东西一直没搞懂，具体详见下一章Row，效果更明显，垂直方向没啥用，不明显）

默认值：是空的

1. alphabetic ，用于对齐字母字符底部的水平线；
2. ideographic，用于对齐表意字符的水平线；

四、textDirection：文字布局方向

默认值：没有，但在row的布局上是左到右的，请看Row的章节

1. TextDirection.ltr ，从左到右；
2. TextDirection.rtl，从右到作布局；

五、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,
            ),
          ],
        ),
      ),
复制代码

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

1. down ，从上向下布局，上图示例个人代码是红、蓝、黄；
2. up，反过来从下向上布局，反过来就是黄、蓝、红；