Flutter - SnackBar

Flutter 之 SnackBar

SnackBar 是用戶操作後，顯示提示信息的控件，默認顯示在屏幕底部，默認顯示4s後自動隱藏。

SnackBar是通過Scaffold的showSnackBar方法來顯示，所以想要顯示SnackBar必須要先拿到Scaffold。

SnackBar 參數詳細說明參見官方文檔；

主要介紹一下，以下2個參數：

• duration 屬性可以設置提示條顯示的時間；
• behavior 屬性可以設置提示條的樣式，我設置的是懸浮樣式；

先上完整代碼

import 'package:flutter/material.dart';

class MyTest extends StatefulWidget {

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyTest> {
  @override
  Widget build(BuildContext context) {
    _displaySnackBar(BuildContext context, data) {
      Scaffold.of(context).removeCurrentSnackBar();
      var text = data;
      Scaffold.of(context).showSnackBar(SnackBar(
          content: Text(text),
          duration: Duration(seconds: 4), 
          behavior: SnackBarBehavior.floating,
      ));
    }

    return Scaffold(
      appBar: AppBar(
        title: Text('SnackBar Demo'),
      ),
      body: Builder(
        builder: (BuildContext context) {
          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                RaisedButton(
                  child: Text('btn1'),
                  onPressed: () {
                    _displaySnackBar(context, 'btn1');
                  },
                ),
                RaisedButton(
                  child: Text('btn2'),
                  onPressed: () {
                    _displaySnackBar(context, 'btn2');
                  },
                ),
                RaisedButton(
                  child: Text('btn3'),
                  onPressed: () {
                    _displaySnackBar(context, 'btn3');
                  },
                ),
              ]
            )
          );
        }
      )
    );
  }
}

需要注意的問題：

• 當BuildContext在Scaffold之前時，調用Scaffold.of(context)會報錯。我是通過Builder Widget來解決，當然還有其他的辦法。

• 當我們在調用SnackBar時，會發現如果上一次調用沒有完成，再次調用SnackBar時，需要等待上次調用完成後，才能進行本次調用，以下辦法可以解決此問題, 先remove當前的snackbar，再show。

Scaffold.of(context).removeCurrentSnackBar();

以上只是本人在工作中遇到的關於SnackBar的一些知識點，歡迎指教！