![](https://img-blog.csdnimg.cn/20200306203411334.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc=,size_16,color_FFFFFF,t_70)

> 注意：無特殊說明，Flutter版本及Dart版本如下：
> - Flutter版本： 1.12.13+hotfix.5 
> - Dart版本： 2.7.0

## Stack

Stack元件可以將子元件疊加顯示，根據子元件的順利依次向上疊加，用法如下：

```dart
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,
    )
  ],
)
```

效果如下：

![](https://img-blog.csdnimg.cn/20200305104014707.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc=,size_16,color_FFFFFF,t_70)

Stack未定位的子元件大小由`fit`引數決定，預設值是`StackFit.loose`，表示子元件自己決定，`StackFit.expand`表示儘可能的大，用法如下：

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

Stack未定位的子元件的預設左上角對齊，透過`alignment`引數控制，用法如下：

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

效果如下：

![](https://img-blog.csdnimg.cn/20200305104944626.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc=,size_16,color_FFFFFF,t_70)

有沒有注意到`fit`和`alignment`引數控制的都是未定位的子元件，那什麼樣的元件叫做定位的子元件？使用Positioned包裹的子元件就是定位的子元件，用法如下：

```dart
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各邊的距離，效果如下：

![](https://img-blog.csdnimg.cn/20200305105726805.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc=,size_16,color_FFFFFF,t_70)

如果子元件超過Stack邊界由`overflow`控制，預設是裁剪，下面設定總是顯示的用法：

```dart
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,
      ),
    )
  ],
)
```

效果如下：

![](https://img-blog.csdnimg.cn/20200305110044108.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc=,size_16,color_FFFFFF,t_70)

## IndexedStack

IndexedStack是Stack的子類，Stack是將所有的子元件疊加顯示，而IndexedStack只顯示指定的子元件，用法如下：

```dart
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`值，程式碼如下：

```dart
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;
                });
              },
            ),
          ],
        )
```

效果如下：

![](https://img-blog.csdnimg.cn/20200305195335888.gif)

## Positioned

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

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

效果如下：

![](https://img-blog.csdnimg.cn/20200306131919802.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc=,size_16,color_FFFFFF,t_70)

相關說明：

- 提供`top`、`bottom`、`left`、`right`四種定位屬性，分別表示距離上下左右的距離。
- 只能用於Stack元件中。
- `left`、`right`和`width`3個引數只能設定其中2個，因為設定了其中2個，第三個已經確定了，同理`top`、`bottom`和`height`也只能設定其中2個。

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

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

![](https://img-blog.csdnimg.cn/2020012208322494.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9tZW5ncWQuYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70)

## 更多相關閱讀：

- [Flutter系列文章總覽](https://blog.csdn.net/mengks1987/article/details/84868953)
- [全網最詳細的一篇Flutter 尺寸限制類容器總結](https://blog.csdn.net/mengks1987/article/details/104683649)
- [Flutter DataTable 看這一篇就夠了](https://blog.csdn.net/mengks1987/article/details/104661591)
- [Flutter Widgets 之 PageView](https://blog.csdn.net/mengks1987/article/details/104570500)</widget></widget></widget></widget></widget></widget>

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

相關文章