flutter佈局-1-column

劉成發表於2018-11-07
Flutter

Column

從今開始連載了，先來介紹下常用的不常用的widgets，從最簡單的column開始。

1、mainAxisAlignment：主軸佈局方式，column主軸方向是垂直的方向

mainaxis.png

預設值：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來說就是水平方向的佈局方式

crossaxis.png

預設值：CrossAxisAlignment.center，預設是水平居中

  1. start ，垂直主軸方向(水平方向)左側對齊；
  2. end，垂直主軸方向(水平方向)右側對齊；
  3. center，垂直主軸方向(水平方向)居中對齊；
  4. stretch ，垂直主軸方向(水平方向)拉伸子child；
  5. baseline，這個要和textBaseline一起使用，；

3、textBaseline：字型的基線（基線這東西一直沒搞懂，具體詳見下一章Row，效果更明顯，垂直方向沒啥用，不明顯）

預設值：是空的

  1. alphabetic ，用於對齊字母字元底部的水平線；
  2. ideographic，用於對齊表意字元的水平線；

4、textDirection：文字佈局方向

預設值：沒有，但在row的佈局上是左到右的，請看Row的章節

  1. TextDirection.ltr ，從左到右；
  2. TextDirection.rtl，從右到做佈局；

5、verticalDirection：就是字child的垂直佈局方向，向上還是向下

未標題-1.png

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

相關文章