Flutter實戰(zhàn) 線性布局(ROW和Column)

所謂線性布局，即指沿水平或垂直方向排布子組件。Flutter 中通過Row和Column來實現(xiàn)線性布局，類似于 Android 中的LinearLayout控件。Row和Column都繼承自Flex，我們將在彈性布局一節(jié)中詳細(xì)介紹Flex。

#主軸和縱軸

對于線性布局，有主軸和縱軸之分，如果布局是沿水平方向，那么主軸就是指水平方向，而縱軸即垂直方向；如果布局沿垂直方向，那么主軸就是指垂直方向，而縱軸就是水平方向。在線性布局中，有兩個定義對齊方式的枚舉類MainAxisAlignment和CrossAxisAlignment，分別代表主軸對齊和縱軸對齊。

#Row

Row 可以在水平方向排列其子 widget。定義如下：

Row({
  ...  
  TextDirection textDirection,    
  MainAxisSize mainAxisSize = MainAxisSize.max,    
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
  VerticalDirection verticalDirection = VerticalDirection.down,  
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
  List<Widget> children = const <Widget>[],
})

• textDirection：表示水平方向子組件的布局順序(是從左往右還是從右往左)，默認(rèn)為系統(tǒng)當(dāng)前Locale環(huán)境的文本方向(如中文、英語都是從左往右，而阿拉伯語是從右往左)。
• mainAxisSize：表示Row在主軸(水平)方向占用的空間，默認(rèn)是MainAxisSize.max，表示盡可能多的占用水平方向的空間，此時無論子widgets實際占用多少水平空間，Row的寬度始終等于水平方向的最大寬度；而MainAxisSize.min表示盡可能少的占用水平空間，當(dāng)子組件沒有占滿水平剩余空間，則Row的實際寬度等于所有子組件占用的的水平空間；
• mainAxisAlignment：表示子組件在Row所占用的水平空間內(nèi)對齊方式，如果mainAxisSize值為MainAxisSize.min，則此屬性無意義，因為子組件的寬度等于Row的寬度。只有當(dāng)mainAxisSize的值為MainAxisSize.max時，此屬性才有意義，MainAxisAlignment.start表示沿textDirection的初始方向?qū)R，如textDirection取值為TextDirection.ltr時，則MainAxisAlignment.start表示左對齊，textDirection取值為TextDirection.rtl時表示從右對齊。而MainAxisAlignment.end和MainAxisAlignment.start正好相反；MainAxisAlignment.center表示居中對齊。讀者可以這么理解：textDirection是mainAxisAlignment的參考系。
• verticalDirection：表示Row縱軸（垂直）的對齊方向，默認(rèn)是VerticalDirection.down，表示從上到下。
• crossAxisAlignment：表示子組件在縱軸方向的對齊方式，Row的高度等于子組件中最高的子元素高度，它的取值和MainAxisAlignment一樣(包含start、end、 center三個值)，不同的是crossAxisAlignment的參考系是verticalDirection，即verticalDirection值為VerticalDirection.down時crossAxisAlignment.start指頂部對齊，verticalDirection值為VerticalDirection.up時，crossAxisAlignment.start指底部對齊；而crossAxisAlignment.end和crossAxisAlignment.start正好相反；
• children ：子組件數(shù)組。

#示例

請閱讀下面代碼，先想象一下運(yùn)行的結(jié)果：

Column(
  //測試Row對齊方式，排除Column默認(rèn)居中對齊的干擾
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(" hello world "),
        Text(" I am Jack "),
      ],
    ),
    Row(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(" hello world "),
        Text(" I am Jack "),
      ],
    ),
    Row(
      mainAxisAlignment: MainAxisAlignment.end,
      textDirection: TextDirection.rtl,
      children: <Widget>[
        Text(" hello world "),
        Text(" I am Jack "),
      ],
    ),
    Row(
      crossAxisAlignment: CrossAxisAlignment.start,  
      verticalDirection: VerticalDirection.up,
      children: <Widget>[
        Text(" hello world ", style: TextStyle(fontSize: 30.0),),
        Text(" I am Jack "),
      ],
    ),
  ],
);

實際運(yùn)行結(jié)果如圖4-1所示：

解釋：第一個Row很簡單，默認(rèn)為居中對齊；第二個Row，由于mainAxisSize值為MainAxisSize.min，Row的寬度等于兩個Text的寬度和，所以對齊是無意義的，所以會從左往右顯示；第三個Row設(shè)置textDirection值為TextDirection.rtl，所以子組件會從右向左的順序排列，而此時MainAxisAlignment.end表示左對齊，所以最終顯示結(jié)果就是圖中第三行的樣子；第四個Row測試的是縱軸的對齊方式，由于兩個子Text字體不一樣，所以其高度也不同，我們指定了verticalDirection值為VerticalDirection.up，即從低向頂排列，而此時crossAxisAlignment值為CrossAxisAlignment.start表示底對齊。

#Column

Column可以在垂直方向排列其子組件。參數(shù)和Row一樣，不同的是布局方向為垂直，主軸縱軸正好相反，讀者可類比Row來理解，下面看一個例子：

import 'package:flutter/material.dart';
class CenterColumnRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Text("hi"),
        Text("world"),
      ],
    );
  }
}

運(yùn)行效果如圖4-2所示：

解釋：

• 由于我們沒有指定Column的mainAxisSize，所以使用默認(rèn)值MainAxisSize.max，則Column會在垂直方向占用盡可能多的空間，此例中為屏幕高度。
• 由于我們指定了 crossAxisAlignment 屬性為CrossAxisAlignment.center，那么子項在Column縱軸方向（此時為水平方向）會居中對齊。注意，在水平方向?qū)R是有邊界的，總寬度為Column占用空間的實際寬度，而實際的寬度取決于子項中寬度最大的 Widget。在本例中，Column有兩個子 Widget，而顯示“world”的Text寬度最大，所以Column的實際寬度則為Text("world") 的寬度，所以居中對齊后Text("hi")會顯示在Text("world")的中間部分。

實際上，Row和Column都只會在主軸方向占用盡可能大的空間，而縱軸的長度則取決于他們最大子元素的長度。如果我們想讓本例中的兩個文本控件在整個手機(jī)屏幕中間對齊，我們有兩種方法：

• 將Column的寬度指定為屏幕寬度；這很簡單，我們可以通過ConstrainedBox或SizedBox（我們將在后面章節(jié)中專門介紹這兩個 Widget）來強(qiáng)制更改寬度限制，例如：

  ConstrainedBox(
    constraints: BoxConstraints(minWidth: double.infinity), 
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Text("hi"),
        Text("world"),
      ],
    ),
  );

將minWidth設(shè)為double.infinity，可以使寬度占用盡可能多的空間。

• 使用Center Widget；我們將在后面章節(jié)中介紹。

#特殊情況

如果Row里面嵌套Row，或者Column里面再嵌套Column，那么只有最外面的Row或Column會占用盡可能大的空間，里面Row或Column所占用的空間為實際大小，下面以Column為例說明：

Container(
  color: Colors.green,
  child: Padding(
    padding: const EdgeInsets.all(16.0),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.max, //有效，外層Colum高度為整個屏幕
      children: <Widget>[
        Container(
          color: Colors.red,
          child: Column(
            mainAxisSize: MainAxisSize.max,//無效，內(nèi)層Colum高度為實際高度  
            children: <Widget>[
              Text("hello world "),
              Text("I am Jack "),
            ],
          ),
        )
      ],
    ),
  ),
);

運(yùn)行效果如圖4-3所示：

如果要讓里面的Column占滿外部Column，可以使用Expanded 組件：

Expanded( 
  child: Container(
    color: Colors.red,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center, //垂直方向居中對齊
      children: <Widget>[
        Text("hello world "),
        Text("I am Jack "),
      ],
    ),
  ),
)

運(yùn)行效果如圖4-4所示：

我們將在介紹彈性布局時詳細(xì)介紹 Expanded。