Flutter線性佈局Row和Column

Flutter垂直和水平佈局

所謂線性佈局，即指沿水平或垂直方向排布子組件。Flutter中經過Row和Column來實現線性佈局，相似於Android中的LinearLayout控件。

主軸和縱軸（MainAxis & CrossAxis）

對於線性佈局，有主軸和縱軸之分，若是佈局是沿水平方向，那麼主軸就是指水平方向，而縱軸即垂直方向；若是佈局沿垂直方向，那麼主軸就是指垂直方向，而縱軸就是水平方向。在線性佈局中，MainAxisAlignment和CrossAxisAlignment，分別表明主軸對齊和縱軸對齊。線性佈局默認儘量多的佔用主軸空間。默認是MainAxisSize.max，效果相似於Android佈局中的match_parent，而MainAxisSize.min表示儘量少的佔用水平空間，當子組件沒有佔滿水平剩餘空間，則Row的實際寬度等於全部子組件佔用的的水平空間，效果相似於Android中的wrap_content； 須要注意的是：Row中主軸方向爲水平方向，Column中的主軸方向爲垂直方向，如圖：

Row和Column的基本使用和效果以下：

new Row(
    children: <Widget>[
        new View(color: Colors.red),
        new View(color: Colors.yellow),
        new View(color: Colors.blue,),
    ],
),

new Column(
    children: <Widget>[
        new View(color: Colors.red),
        new View(color: Colors.yellow),
        new View(color: Colors.blue,),
    ],
),
複製代碼

效果如圖：

其中Row的寬度和Column爲填充父控件剩餘全部空間。

佈局方向

textDirection表示子組件在水平方向的佈局順序(是從左往右仍是從右往左)，默認爲：TextDirection.ltr從左向右。在Column中使用此屬性沒有任何效果。對應效果分別爲：

verticalDirection：表示縱軸的對齊方向，默認是VerticalDirection.down，表示從上到下。在Column中效果以下

而在 Row中則能夠用改屬性設置字組件頭部對齊或者底部對齊，但通常採用 crossAxisAlignment屬性進行設置。

對齊方式

MainAxisAlignment

mainAxisAlignment表示子組件在主軸方向上的對齊方式，若是mainAxisSize值爲MainAxisSize.min，則此屬性無心義，由於子組件的寬度等於Row的寬度。 對齊方式有start、end、center、spaceBetween、spaceAround、spaceEvenly。對應的效果分別爲：

start和end

表示沿主軸初始方向，默認爲這種效果，子組件佈局方向沿着textDirection設定的佈局方向，和start表示逆主軸初始方向，子組件佈局方向逆着textDirection設定的佈局方向，效果如圖：

center

center表示儘量的將子組件靠近中間排列。效果如圖：

spaceBetween、spaceAround和spaceEvenly

spaceBetween表示在子組件之間均勻的添加空白區域，讓每一個組件和相鄰的組件都有相同的間距，但首尾組件與父組件沒有間隙。 spaceAround表示在子組件之間均勻的添加空白區域，讓每一個組件和相鄰的組件都有相同的間距，可是首尾距離父邊界的距離爲間距的一半。 spaceEvenly表示在子組件之間均勻的添加空白區域，讓每一個組件和相鄰的組件都有相同的間距，可是首尾距離父邊界的距離和間距同樣。 效果如圖：

以 MainAxisAlignment.center爲例，其使用方法爲：

new Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
        new View(color: Colors.red),
        new View(color: Colors.yellow),
        new View(color: Colors.blue,),
    ],
),
複製代碼

CrossAxisAlignment

CrossAxisAlignment表示子組件在縱軸方向上的對齊方式。對齊方式有：start、end、center、stretch、baseline。

start和end

start和end是一對相反的對齊方式，在未設置verticalDirection屬性時（默認VerticalDirection.down），start表示頂部對齊，end表示底部對齊。而當verticalDirection爲VerticalDirection.up時，start表示底部對齊，end表示頂部對齊。效果以下圖：

stretch和baseline

stretch表示子組件填滿縱軸方向。 baseline表示沿橫軸放置子級,以便其基線匹配，若是主軸是垂直的，那麼它的效果和start同樣。

特殊狀況

若是Row裏面嵌套Row，或者Column裏面再嵌套Column，那麼只有對最外面的Row或Column會佔用盡量大的空間，裏面Row或Column所佔用的空間爲實際大小。

默認屬性

經過閱讀Row和Column的源碼，能夠了解到它們的默認屬性：

Row({
    Key key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline textBaseline,
    List<Widget> children = const <Widget>[],
  }) : super(
    children: children,
    key: key,
    direction: Axis.horizontal,
    mainAxisAlignment: mainAxisAlignment,
    mainAxisSize: mainAxisSize,
    crossAxisAlignment: crossAxisAlignment,
    textDirection: textDirection,
    verticalDirection: verticalDirection,
    textBaseline: textBaseline,
  );
  
  Column({
    Key key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline textBaseline,
    List<Widget> children = const <Widget>[],
  }) : super(
    children: children,
    key: key,
    direction: Axis.vertical,
    mainAxisAlignment: mainAxisAlignment,
    mainAxisSize: mainAxisSize,
    crossAxisAlignment: crossAxisAlignment,
    textDirection: textDirection,
    verticalDirection: verticalDirection,
    textBaseline: textBaseline,
  );
複製代碼

歸納以下：

屬性	默認值
mainAxisAlignment	start
mainAxisSize	max
crossAxisAlignment	center
verticalDirection	down

總結

瞭解了Flutter線性佈局以後，不難發現，其設計思想和使用方式都和React及其相似，建議將兩者放在一塊兒對比學習。 附上React相關知識連接：

React Flexbox佈局

CSS3 Flexbox 口訣