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，反過來從下向上佈局，反過來就是黃、藍、紅；