先看一下什么是SnackBar,如下圖：

image

SnackBar是用戶操作后，顯示提示信息的一個(gè)控件，類似Toast，會(huì)自動(dòng)隱藏。它還可以添加操作按鈕，等等。SnackBar是通過Scaffold的showSnackBar方法來顯示的。所以要顯示一個(gè)SnackBar,要先拿到Scaffold。

創(chuàng)建Scaffold

new Scaffold(
    appBar: new AppBar(
        title: new Text('SnackBar Demo'),
    ),
    body: new SnackBarPage(),
);

顯示SnackBar

首先創(chuàng)建一個(gè)SnackBar,再通過Scaffold的方法來顯示。

final snackBar = new SnackBar(content: new Text('這是一個(gè)SnackBar!'));

Scaffold.of(context).showSnackBar(snackBar);

給SnackBar添加一個(gè)操作按鈕

有時(shí)候，我們可能會(huì)想在顯示的提示信息上添加一些操作。例如提示用戶刪除了一條消息，可以在提示信息上添加一個(gè)撤消的按鈕，要達(dá)到這個(gè)效果，我們可以在SnackBar上添加一個(gè)操作按鈕。

final snackBar = new SnackBar(
    context: new Text('刪除信息'),
    action: new SnackBarAction(
        label: '撤消',
        onPressed: () {
            // do something to undo
        }
    ),
);

注意事項(xiàng)

當(dāng)BuildContext在Scaffold之前時(shí)，調(diào)用Scaffold.of(context)會(huì)報(bào)錯(cuò)。這時(shí)可以通過Builder Widget來解決，代碼如下：

body: new Builder(builder: (BuildContext context) {
          return new Center(
            child: new GestureDetector(
              onTap: () {
                final snackBar =
                    new SnackBar(content: new Text('這是一個(gè)SnackBar'));
                Scaffold.of(context).showSnackBar(snackBar);
              },
              child: new Text('顯示SnackBar'),
            ),
          );
        })

關(guān)于學(xué)習(xí)

flutter的學(xué)習(xí)文章及代碼都整理在這個(gè)github倉庫里