1.繼承關係

Object > Diagnosticable > DiagnosticableTree > Widget > RenderObjectWidget > MultiChildRenderObjectWidget > Flex > Row、Column

2.Row介紹

 在水平方向上排列子widget的列表，如android的線性佈局設定了屬性:android:orientation 值為horizontal

3.Row構造方法

  Row({
    Key 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>[], // 子控制元件
  })
 

4.引數詳解

4.1Key key

4.1 MainAxisAlignment mainAxisAlignment

子控制元件放置方式，列舉物件（預設值為start）：    

enum MainAxisAlignment {
  start,  // 儘可能靠近主軸的起點
   end, // 儘可能靠近主軸末端的地方
  center, // 儘可能近主軸中間的地方
  spaceBetween, // 在子控制元件中間均勻地放置自由空間，第一個前和最後一個後無空間
  spaceAround,  // 在子控制元件中間均勻地放置自由空間，同時也放置一半空間在第一個前和最後一個控制元件後。
  spaceEvenly,  // 在第一個控制元件和最後一個控制元件之前和之後均勻地放置自由空間
}
 

例如：

4.2  MainAxisSize mainAxisSize

子控制元件如何放置，列舉物件（預設值為max）： 

enum MainAxisSize {
  min, // 控制元件儘可能小（取此值時，上面的MainAxisAlignment 無效）
  max, //  控制元件儘可能大
}

4.3 CrossAxisAlignment crossAxisAlignment

子控制元件對齊方式，當子控制元件高度不一樣時，如何被放置在中心軸，而MainAxisAlignment 決定了子控制元件間的間隔

enum CrossAxisAlignment {
  start,  // 子控制元件都父控制元件的項部
  end, // 子控制元件都在父控制元件的底部
  center, // 子控制元件居父控制元件的中部
  stretch, // 子控制元件填滿橫軸，（ 使用此值時，子控制元件一定要設定width）
  baseline, // 當子控制元件是Text時有效，並要設定下面的TextBaseLine屬性
}
 

4.4 TextBaseline textBaseline

 對齊文字的水平線

enum TextBaseline {
  alphabetic, // 用於對齊字母字元的字形底部的水平線
  ideographic,  // 用於對齊表意文字的水平線
}

4.5 TextDirection textDirection（VerticalDirection verticalDirection)

 子控制元件排序方向 （一般不用設定，除非想反轉子控制元件排序）

Row 使用 TextDirection

Column 使用 VerticalDirection

enum VerticalDirection {
  up,  //  子控制元件從下到上排序
  down, //  子控制元件從上到下排序
}
enum TextDirection {
  rtl, // 子控制元件從右到左排序
  ltr, // 子控制元件從左到右排序
}

 4.6 List<Widget> children = const <Widget>[]

子控制元件

Column

在垂直方向上排列子widget的列表，如android的線性佈局設定了屬性:android:orientation 值為vertical

下面與Row一致，不再詳解！

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

進階：設定子控制元件比重

使用控制元件Expanded設定flex即可：

return new Center(
  child: new Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        new Expanded(
            child: new Image.network( 'https://avatar.csdn.net/8/9/A/3_chenlove1.jpg', )
        ),
        new Expanded(
            flex: 2,
            child: new Image.network( 'https://avatar.csdn.net/8/9/A/3_chenlove1.jpg', )
        ),
        new Expanded(
            flex: 3,
            child: new Image.network( 'https://avatar.csdn.net/8/9/A/3_chenlove1.jpg', )
        ),
      ]),
);

參考 

sdk 原始碼！