Flutter Widget之 Row、Column、Stack、IndexedStack等

Flutter中包含多個子控件的佈局類控件有很多，下面是官方文檔
官方文檔

我們來看看常用的

控件名稱	作用
Row	水平方向排列子控件
Column	垂直方向排列子控件
Stack	堆疊的方式排列子控件
IndexedStack	堆疊的方式排列子控件，通過index控制顯示哪一個子控件
GridView	網格佈局
Flow	流式佈局
Table	表格
Wrap	可以讓子控件自動換行的控件
ListBody	將子控件按照指定的方向進行排列
ListView	列表控件
Expanded	可展開子控件的控件

---

Row

水平排列的線性佈局，類似於Android中的LinearLayout把orientation屬性設置爲horizontal

構造方法

  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>[],  //子控件
  })

關於其中的屬性的用法詳情請看 MainAxisAlignment和CrossAxisAlignment 詳解

我們來簡單用一用

Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Box("1"),
        Box("2"),
        Box("3"),
      ],
    );

當我們沒有明確指定外部容器的寬高時，mainAxisSize屬性會生效

Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.min, //儘可能小的減少空閒空間
      children: <Widget>[
        Box("1"),
        Box("2"),
        Box("3"),
      ],
    );

Column

垂直排列的線性佈局，類似於Android中的LinearLayout把orientation屬性設置爲vertical
用法跟Row基本一致

這裏我們就直接用了

Container(
      width: double.infinity,
      height: double.infinity,
      margin: EdgeInsets.all(10),
      decoration: BoxDecoration(
          border: Border.all(
        color: Colors.black,
        width: 1,
      )),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.end,
        children: <Widget>[
          Box("1"),
          Box("2"),
          Box("3"),
          Box("4"),
        ],
      ),
    );

Stack

  Stack({
    Key key,
    this.alignment = AlignmentDirectional.topStart, //對齊方式
    this.textDirection,  //textDirection文本對齊方式，一般不會修改
    this.fit = StackFit.loose,  //設置子控件的佔用尺寸
    this.overflow = Overflow.clip,//超出區域是否裁剪
    List<Widget> children = const <Widget>[],
  })

堆疊的方式排列子控件，其屬性比較簡單。
下面我們簡單用一用

Stack(
      children: <Widget>[
        Image.network(
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547639589928&di=6d46424b47eec79a7f80bace2999217d&imgtype=0&src=http%3A%2F%2Fp0.ssl.qhimg.com%2Ft01c3f5bf72e7d1ac67.png"),
        Text(
          "Stack",
          style: TextStyle(
            color: Colors.red,
            fontSize: 20,
            fontStyle: FontStyle.italic,
          ),
        ),
      ],
      alignment: Alignment.bottomCenter,
    );

IndexedStack

用法同Stack,多了一個index屬性，用來控制顯示哪個子控件

  IndexedStack({
    Key key,
    AlignmentGeometry alignment = AlignmentDirectional.topStart,
    TextDirection textDirection,
    StackFit sizing = StackFit.loose,
    this.index = 0,   //顯示控件的下標
    List<Widget> children = const <Widget>[],
  })

簡單用一用

IndexedStack(
      index: 1,
      children: <Widget>[
        Text("IndexStackWidget"),
        Image.network(
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547639589928&di=6d46424b47eec79a7f80bace2999217d&imgtype=0&src=http%3A%2F%2Fp0.ssl.qhimg.com%2Ft01c3f5bf72e7d1ac67.png",
        ),
      ],
    );

GridView

網格佈局在移動端也是很常用的，由於內容相對較多，詳細請看：GridView詳解

ListView

網格佈局在移動端也是很常用的，由於內容相對較多，詳細請看 Flutter ListView

Wrap 和 Flow

流式佈局用法，詳細請看： FlutterWrap和Flow

Expanded 和 Flexible

可擴展布局，它倆明明接收一個child，不知道爲什麼官方給他放到了多子控件的佈局中。
詳細請看： Flutter Expanded 和 Flexible

---

如果你覺得本文對你有幫助，麻煩動動手指頂一下，算是對本文的一個認可。也可以關注我的 Flutter 博客專欄，我會不定期的更新，如果文中有什麼錯誤的地方，還望指正，轉載請註明轉自喻志強的博客 ，謝謝！