flutter佈局-2-row

劉成發表於2018-11-07

Row

連載:flutter佈局-1-column

1、mainAxisAlignment:主軸佈局方式,row主軸方向是水平方向

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: 交叉軸的佈局方式,對於row來說就是垂直方向的佈局方式

mainaxis.png

預設值:CrossAxisAlignment.center,預設是水平居中

  1. start ,垂直主軸方向(垂直方向)頂部對齊;
  2. end,垂直主軸方向(垂直方向)底部對齊;
  3. center,垂直主軸方向(垂直方向)居中對齊;
  4. stretch ,垂直主軸方向(垂直方向)拉伸子child;
  5. baseline,這個要和textBaseline一起使用,;

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

WX20181104-143705@2x.png

預設值:是空的

  1. alphabetic ,用於對齊字母字元底部的水平線;
  2. ideographic,用於對齊表意字元的水平線,可以看出劉成下沉一點,abc上浮了,;

4、textDirection:文字佈局方向

預設值:沒有,

  1. TextDirection.ltr ,從左到右;
  2. TextDirection.rtl,從右到做佈局;

5、verticalDirection:就是字child的垂直佈局方向,向上還是向下,但是在row下這個不起作用

預設值:VerticalDirection.down 也就是從上到下的佈局

  1. down ,從上向下佈局,上圖示例我的程式碼是紅、藍、黃;
  2. up,反過來從下向上佈局,反過來就是黃、藍、紅;

相關文章