線性布局膝捞，即指沿水平或垂直方向排布子組件瀑凝。Flutter中通過Row和Column來實現(xiàn)線性布局序芦。

1.主軸和縱軸

對于線性布局，有主軸和縱軸之分粤咪，如果布局是沿水平方向谚中，那么主軸就是指水平方向，而縱軸即垂直方向寥枝；如果布局沿垂直方向宪塔，那么主軸就是指垂直方向，而縱軸就是水平方向囊拜。在線性布局中某筐，有兩個定義對齊方式的枚舉類MainAxisAlignment和CrossAxisAlignment，分別代表主軸對齊和縱軸對齊冠跷。

2.Row

Row可以在水平方向排列其子widget南誊。源碼如下：

 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>[],
  })

• textDirection
  表示水平方向子組件的布局順序(是從左往右還是從右往左)，默認為系統(tǒng)當前Locale環(huán)境的文本方向(如中文蜜托、英語都是從左往右抄囚，而阿拉伯語是從右往左)。
• mainAxisSize
  表示Row在主軸(水平)方向占用的空間橄务，默認是MainAxisSize.max幔托，表示盡可能多的占用水平方向的空間，此時無論子widgets實際占用多少水平空間蜂挪，Row的寬度始終等于水平方向的最大寬度柑司；而MainAxisSize.min表示盡可能少的占用水平空間迫肖，當子組件沒有占滿水平剩余空間時锅劝，Row的實際寬度等于所有子組件占用的的水平空間攒驰。
• mainAxisAlignment
  表示子組件在Row所占用的水平空間內(nèi)對齊方式，如果mainAxisSize值為MainAxisSize.min故爵，則此屬性無意義玻粪，因為子組件的寬度等于Row的寬度。只有當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縱軸（垂直）的對齊方向协怒，默認是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ù)組
  代碼示例：

class RowDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        Container(
          color: Color(0xfffcec4ec),
          width: 90.0,
          height: 50.0,
        ),
        Container(
          color: Color(0xfff8bbd0),
          width: 90.0,
          height: 50.0,
        ),
        Container(
          color: Color(0xfff48fb1),
          width: 90.0,
          height: 50.0,
        ),
      ],
    );
  }
}

3. Column

Column可以在垂直方向排列其子組件。參數(shù)和Row一樣歧譬，不同的是布局方向為垂直岸浑，主軸縱軸正好相反。代碼示例：

class ColumnDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Container(
          color: Color(0xfffce4ec),
          width: 90.0,
          height: 50.0,
        ),
        Container(
          color: Color(0xfff8bbd0),
          width: 90.0,
          height: 50.0,
        ),
        Container(
          color: Color(0xfff48fb1),
          width: 90.0,
          height: 50.0,
        ),
        Container(
          color: Color(0xfff06292),
          width: 90.0,
          height: 50.0,
        ),
        Text('We move under cover and we move as one'),
        Text('Through the night, we have one shot to live another day'),
        Text('We cannot let a stray gunshot give us away'),
        Text('We will fight up close, seize the moment and stay in it'),
        Text('It’s either that or meet the business end of a bayonet'),
        Text('The code word is ‘Rochambeau,’ dig me?'),
        Text(
          'Rochambeau!',
          style: DefaultTextStyle.of(context).style.apply(fontSizeFactor: 2.0),
        ),
      ],
    );
  }
}

運行效果圖如下：