Flutter Row、Column 參數詳解

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

之前文章講解過，或者看官方解釋：https://flutterchina.club/widgets-intro/#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 源碼！