Flutter Widgets 之 SnackBar

注意：無特殊說明，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),
    ));
複製代碼

效果以下：

經過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),
    ));
複製代碼

效果以下：

SnackBar的有2種彈出形式，默認是fixed，直接在底部彈出，另外一種是floating,懸浮在底部，用法以下：

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

floating效果：

咱們還能夠對SnackBar增長行爲組件，好比增長一個「知道了」按鈕，點擊「知道了」，消息立刻隱藏，用法以下：

Scaffold.of(context).showSnackBar(SnackBar(
      content: Row(
        children: <Widget>[
          Icon(Icons.check,color: Colors.green,),
          Text('下載成功')],
      ),
      action: SnackBarAction(
        label: '知道了',
        onPressed: (){},
      ),
    ));
複製代碼

效果：

瞬間多個彈出延遲問題

當短期內屢次調用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系列文章總覽
• Flutter Widgets 之 Expanded和Flexible
• Flutter Widgets 之 AnimatedList
• Flutter Widgets 之 SliverAppBar

若是這篇文章有幫助到您，但願您來個「贊」並關注個人公衆號，很是謝謝。