![](https://img-blog.csdnimg.cn/20200301175213866.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

## 基礎用法

應用程式有時候需要彈出訊息提示使用者，比如‘網路連線失敗’、‘下載成功’等提示，就像Android
等Toast，在Flutter中使用SnackBar元件，用法如下：
```
Scaffold.of(context).showSnackBar(SnackBar(
      content: Text('老孟，一枚有態度的程式設計師'),
    ));
```
注意並不是在build方法中直接使用SnackBar元件，而是呼叫`Scaffold.of(context).showSnackBar`方法，訊息會在底部彈出並顯示一段時間，預設顯示4秒，然後彈出，我們可以設定其顯示的時間：
```
Scaffold.of(context).showSnackBar(SnackBar(
      duration: Duration(seconds: 1),
    ));
```
顯示的時間為1秒，`content`屬性不一定是文字，也可以是其他元件，比如顯示一個圖示和文字：
```
Scaffold.of(context).showSnackBar(SnackBar(
      content: Row(
        children: <widget>[
          Icon(Icons.check,color: Colors.green,),
          Text('下載成功')],
      ),
      duration: Duration(seconds: 1),
    ));
```

效果如下：

![](https://img-blog.csdnimg.cn/20200301172213248.png)

透過`shape`屬性設定其形狀：
```
Scaffold.of(context).showSnackBar(SnackBar(
      content: Row(
        children: <widget>[
          Icon(Icons.check,color: Colors.green,),
          Text('下載成功')],
      ),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(50))
      ),
      duration: Duration(seconds: 1),
    ));
```
效果如下：

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

SnackBar的有2種彈出形式，預設是`fixed`，直接在底部彈出，另一種是`floating`,懸浮在底部，用法如下：

```
Scaffold.of(context).showSnackBar(SnackBar(
      content: Row(
        children: <widget>[
          Icon(Icons.check,color: Colors.green,),
          Text('下載成功')],
      ),
      behavior: SnackBarBehavior.floating,
    ));
```

`floating`效果：

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

我們還可以對SnackBar增加行為元件，比如增加一個“知道了”按鈕，點選“知道了”，訊息馬上隱藏，用法如下：

```
Scaffold.of(context).showSnackBar(SnackBar(
      content: Row(
        children: <widget>[
          Icon(Icons.check,color: Colors.green,),
          Text('下載成功')],
      ),
      action: SnackBarAction(
        label: '知道了',
        onPressed: (){},
      ),
    ));
```
效果：

![](https://img-blog.csdnimg.cn/20200301173633785.png)

## 瞬間多個彈出延遲問題

當短時間內多次呼叫SnackBar方法時，SnackBar訊息將會以佇列的形式一個一個的彈出，比如下面的程式碼：
```
RaisedButton(
          child: Text(
            '點我，彈出SnackBar',
          ),
          onPressed: () {

List.generate(10, (index){
              Scaffold.of(context).showSnackBar(SnackBar(
                content: Text('我是訊息：$index'),
              ));
            });
          },
        )
```

預設情況下每個顯示4秒，如果有10個，那麼40秒內會一直彈訊息，體驗明顯不友好，我們希望的效果是如果有新的訊息時，舊的都訊息立刻消失，顯示新的訊息,只需在彈出新的SnackBar時移除現在的SnackBar，

```
Scaffold.of(context).removeCurrentSnackBar();
Scaffold.of(context).showSnackBar(...);
```

### 更多相關閱讀：

- [Flutter系列文章總覽](https://blog.csdn.net/mengks1987/article/details/84868953)
- [Flutter Widgets 之 Expanded和Flexible](https://mengqd.blog.csdn.net/article/details/104414251)
- [Flutter Widgets 之 AnimatedList ](https://blog.csdn.net/mengks1987/article/details/103689129)
- [Flutter Widgets 之 SliverAppBar](https://blog.csdn.net/mengks1987/article/details/104031790)

##### 如果這篇文章有幫助到您，希望您來個“贊”並關注我的公眾號，非常謝謝。
![](https://img-blog.csdnimg.cn/2020012208322494.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9tZW5ncWQuYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70)</widget></widget></widget></widget>

Flutter Widgets 之 SnackBar

相關文章