一篇帶你看懂Flutter疊加組件Stack

時間 2020-03-07

標籤一篇看懂 flutter 疊加組件 stack 简体版

原文原文鏈接

注意：無特殊說明，Flutter版本及Dart版本以下：segmentfault

Flutter版本： 1.12.13+hotfix.5

Dart版本： 2.7.0

Stack

Stack組件能夠將子組件疊加顯示，根據子組件的順利依次向上疊加，用法以下：spa

Stack(
  children: <Widget>[
    Container(
      height: 200,
      width: 200,
      color: Colors.red,
    ),
    Container(
      height: 170,
      width: 170,
      color: Colors.blue,
    ),
    Container(
      height: 140,
      width: 140,
      color: Colors.yellow,
    )
  ],
)

效果以下：.net

Stack未定位的子組件大小由fit參數決定，默認值是StackFit.loose，表示子組件本身決定，StackFit.expand表示儘量的大，用法以下：3d

Stack(
  fit: StackFit.expand,
  ...
)

Stack未定位的子組件的默認左上角對齊，經過alignment參數控制，用法以下：code

Stack(
  alignment: Alignment.center,
  ...
)

效果以下：blog

有沒有注意到fit和alignment參數控制的都是未定位的子組件，那什麼樣的組件叫作定位的子組件？使用Positioned包裹的子組件就是定位的子組件，用法以下：get

Stack(
  alignment: Alignment.center,
  children: <Widget>[
    Container(
      height: 200,
      width: 200,
      color: Colors.red,
    ),
    Positioned(
      left: 10,
      right: 10,
      bottom: 10,
      top: 10,
      child: Container(
        color: Colors.green,
      ),
    )
  ],
)

Positioned組件能夠指定距Stack各邊的距離，效果以下：it

若是子組件超過Stack邊界由overflow控制，默認是裁剪，下面設置老是顯示的用法：io

Stack(
  overflow: Overflow.visible,
  children: <Widget>[
    Container(
      height: 200,
      width: 200,
      color: Colors.red,
    ),
    Positioned(
      left: 100,
      top: 100,
      height: 150,
      width: 150,
      child: Container(
        color: Colors.green,
      ),
    )
  ],
)

效果以下：ast

IndexedStack

IndexedStack是Stack的子類，Stack是將全部的子組件疊加顯示，而IndexedStack只顯示指定的子組件，用法以下：

IndexedStack(
      index: _index,
      children: <Widget>[
        Center(
          child: Container(
            height: 300,
            width: 300,
            color: Colors.red,
            alignment: Alignment.center,
            child: Icon(
              Icons.fastfood,
              size: 60,
              color: Colors.blue,
            ),
          ),
        ),
        Center(
          child: Container(
            height: 300,
            width: 300,
            color: Colors.green,
            alignment: Alignment.center,
            child: Icon(
              Icons.cake,
              size: 60,
              color: Colors.blue,
            ),
          ),
        ),
        Center(
          child: Container(
            height: 300,
            width: 300,
            color: Colors.yellow,
            alignment: Alignment.center,
            child: Icon(
              Icons.local_cafe,
              size: 60,
              color: Colors.blue,
            ),
          ),
        ),
      ],
    )

經過點擊按鈕更新_index值，代碼以下：

Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            IconButton(
              icon: Icon(Icons.fastfood),
              onPressed: () {
                setState(() {
                  _index = 0;
                });
              },
            ),
            IconButton(
              icon: Icon(Icons.cake),
              onPressed: () {
                setState(() {
                  _index = 1;
                });
              },
            ),
            IconButton(
              icon: Icon(Icons.local_cafe),
              onPressed: () {
                setState(() {
                  _index = 2;
                });
              },
            ),
          ],
        )

效果以下：

Positioned

Positioned用於定位Stack子組件，Positioned必須是Stack的子組件，基本用法以下：

Stack(
  children: <Widget>[
    Positioned(
      left: 10,
      right: 10,
      top: 10,
      bottom: 10,
      child: Container(color: Colors.red),
    ),
  ],
)

效果以下：

相關說明：

提供top、bottom、left、right四種定位屬性，分別表示距離上下左右的距離。
只能用於Stack組件中。
left、right和width3個參數只能設置其中2個，由於設置了其中2個，第三個已經肯定了，同理top、bottom和height也只能設置其中2個。

Positioned提供便捷的構建方式，好比Positioned.fromRect、Positioned.fill等，這些便捷的構建方式萬變不離其宗，只不過換了一種方式設置top、bottom、left、right四種定位屬性。

今天的文章對你們是否有幫助？若是有，請在文章底部留言和點贊，以表示對個人支持，大家的留言、點贊和轉發關注是我持續更新的動力！

一篇帶你看懂Flutter疊加組件Stack

Stack

IndexedStack

Positioned

更多相關閱讀：