摘要：也是中常用的控件。屬性主軸對準方式對于來說，水平是主軸。對于，交叉軸是水平。由左到右，左為頭，右為尾表示在水平方向主軸。表示從左上角開始排文本方向，的流動方向表示超過的部分是否裁剪掉不剪掉。默認是是包裹的高度即可。

flutter控件練習demo地址：github

因為 Row 和 Column 都是繼承于 Flex，所以他們兩個的屬性也都是 Flex 的屬性

Row 是 Flutter 中常用的控件。一個讓 children 在水平方向依次排列 。如果 Row 空間 不足的話。 自身不帶滾動的。

Column 也是 Flutter 中常用的控件。 一個 children 在垂直方向依次排列 。如果 Column 空間 不足的話。 自身不帶滾動的。

2.1 mainAxisAlignment (主軸對準方式)

對于 Row 來說 ， 水平是主軸。垂直是 交叉軸。 對于 Column 來說， 垂直是主軸。水平是 交叉軸 把 children 放到 主軸 的哪個位置 。 如果要驗證這個屬性，記住把 mainAxisSize 設置成 MainAxisSize.max ，

2.2 mainAxisSize

也就是來規(guī)定自己( Row 或者 Column )的大小。

MainAxisSize.min : 主軸方向，包裹住 childre 即可。相當于 android 中的 wrap_content

MainAxisSize.max(默認值) : 主軸方向，鋪滿 ( Row 或者 Column )的父 Widget 的大小。 相當于 android 中的 match_parent

2.3 crossAxisAlignment (交叉軸)跟主軸垂直的一個軸

交叉軸 顧名思義： 就是 跟 主軸 垂直的 一個軸 對于 Row 。交叉軸 是 在垂直。對于 Column，交叉軸 是水平 。下面還是 以 Row 舉個例子

2.4 textDirection

children 在 主軸 怎樣排列。 正方向排列還是反方向排列

Row

TextDirection.ltr : 表示在水平方向(主軸)。由左到右 ， 左為頭 ， 右為尾

TextDirection.rtl ：表示在水平方向(主軸)。由右到左 ， 右為頭 ， 左為尾

Column

TextDirection.ltr : 表示在垂直方向(主軸)。由上到下 ， 上為頭 ， 下為尾

TextDirection.rtl ：表示在垂直方向(主軸)。由下到上 ， 下為頭 ，上為尾

2.5 verticalDirection

children 在 交叉軸 怎樣排列。 正方向排列還是反方向排列

Row

VerticalDirection.down : 表示在垂直方向(交叉軸)。由上到下 ， 上為頭 ， 下為尾

VerticalDirection.up ：表示在垂直方向(交叉軸)。由下到上 ， 下為頭 ， 上為尾

Column

VerticalDirection.down : 表示在水平方向(交叉軸)。由左到右 ， 左為頭 ， 右為尾

TextDirection.rtl ：表示在水平方向(交叉軸)。由右到左 ， 右為頭 ， 左為尾

取代線性布局 (和Android中的LinearLayout相似,但是我感覺怎么這么像 FrameLayout 呢？)，Stack允許子 widget 堆疊， 你可以使用 Positioned 來定位他們相對于Stack的上下左右四條邊的位置。Stacks是基于Web開發(fā)中的絕度定位（absolute positioning )布局模型設計的。用于將多個childs相對于其框的邊緣定位，多用于以簡單方式重疊children

alignment： 默認值。AlignmentDirectional.topStart ( AlignmentDirectional(-1.0, -1.0) )。 表示從左上角開始排 children

textDirection： 文本方向 ， children 的流動方向

overflow： 表示 超過的部分是否裁剪掉 Overflow.visible 不剪掉。 Overflow.clip 減掉

fit： 讓 children 怎樣填充 Stack 。

StackFit.passthrough 不改變子節(jié)點約束 也就是說 children 是多大就是多大

StackFit.expand 子節(jié)點最大可能的占用空間 ，讓 children 的大小 擴大到 Stack 的大小

StackFit.loose:放開了子節(jié)點寬高的約束，可以讓子節(jié)點從0到最大尺寸

demo 代碼

import "package:flutter/material.dart";

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("row"),
        centerTitle: true,
      ),
      body: RowDemo(),
    );
  }
}

class RowDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    final _list = [
      RaisedButton(
        disabledColor: Colors.red,
        child: Text("兒子1"),
      ),
      Text("兒子2"),
      Text("兒子3"),
      Text("兒子4"),
      Text("兒子5"),
    ];
    return Column(
      children: [
        SizedBox(
          height: 30,
        ),
        Container(
          color: Colors.grey,
          child: Row(
            // 主軸(main axis)
            // 把 children 放到 Column 主軸 的哪個位置
            //  end : 尾部， start ：頭部， center ： 中間 ，spaceBetween：在 children 之間均勻地放置 空間 ，spaceAround ： 每個 children
            mainAxisAlignment: MainAxisAlignment.start,

            // 此 Row 的寬度。默認是 MainAxisSize.max
            //          MainAxisSize.min 是 包裹 children 的高度 即可  。android 中 相當于 wrap_content
            //          MainAxisSize.max 是 鋪滿 Row 的父 Widget 的寬度  。android 中 相當于 match_parent
            //  如果設置成 MainAxisSize.min 。 那么 mainAxisAlignment 屬性相當于無效。 因為是包裹 children
            mainAxisSize: MainAxisSize.max,
            // 交叉軸(cross axis)
            // 把 children 放到 Column 主軸 的哪個位置
            // end : 尾部， start ：頭部， center ： 中間 ，
            crossAxisAlignment: CrossAxisAlignment.start,
            // children 在主軸 的排列順序
            textDirection: TextDirection.ltr,
            // children 在 交叉軸 的排列順序
            verticalDirection: VerticalDirection.down,
            children: _list,
          ),
        ),
        SizedBox(
          height: 30,
        ),
        SizedBox(
            width: 200,
            height: 200,
            child: Stack(
              alignment: AlignmentDirectional.topStart,
//            alignment:   AlignmentDirectional(-1.0, -1.0),
              fit: StackFit.loose,
              overflow: Overflow.visible,
              children: [
                Container(
                  color: Colors.black,
                  height: 200,
                  width: 200,
                ),
                Container(
                  color: Colors.deepPurple,
                  height: 100,
                  width: 100,
                ),
                Container(
                  color: Colors.green,
                  height: 50,
                  width: 50,
                ),
              ],
            )),
      ],
    );
  }
}