显示 snackbars

在某些情况下,我们需要用方便且友好的方式告诉用户发生了什么。例如,当用户滑动删除列表中的一条消息时,我们或许想提醒用户消息已经被删除了,或者除了提醒之外,我们还可以提供一个撤销的操作。

It can be useful to briefly inform your users when certain actions take place. For example, when a user swipes away a message in a list, you might want to inform them that the message has been deleted. You might even want to give them an option to undo the action.

在 Material Design 中,用一个 SnackBar 就可以实现这个需求。请参见以下步骤:

In Material Design, this is the job of a SnackBar. This recipe implements a snackbar using the following steps:

步骤

Directions

  1. 创建一个 Scaffold

    Create a Scaffold.

  2. 显示一个 Scaffold

    Display a SnackBar.

  3. 提供一个附加的操作

    Provide an optional action.

1. 创建一个 Scaffold

1. Create a Scaffold

在创建遵循 Material Design 设计规范的应用时,我们希望应用可以有一个一致的视觉层次结构。当我们在屏幕的底部显示一个 SnackBar 时,不能覆盖其他重要的 widgets,比如 FloatingActionButton

When creating apps that follow the Material Design guidelines, give your apps a consistent visual structure. In this example, display the SnackBar at the bottom of the screen, without overlapping other important widgets, such as the FloatingActionButton.

material library 中的 Scaffold widget 就可以创建一个一致的视觉层次结构,并且可以确保其他重要的 widgets 不会被覆盖。

The Scaffold widget, from the material library, creates this visual structure and ensures that important widgets don’t overlap.

Scaffold(
  appBar: AppBar(
    title: Text('SnackBar Demo'),
  ),
  body: SnackBarPage(), // Complete this code in the next step.
);

2. 显示一个 SnackBar

2. Display a SnackBar

有了 Scaffold,我们就可以显示一个 SnackBar 了。首先,我们需要先创建一个 SnackBar ,然后使用 Scaffold 来显示它。

With the Scaffold in place, display a SnackBar. First, create a SnackBar, then display it using the Scaffold.

final snackBar = SnackBar(content: Text('Yay! A SnackBar!'));

// Find the Scaffold in the widget tree and use it to show a SnackBar.
Scaffold.of(context).showSnackBar(snackBar);

3. 提供一个附加的操作

3. Provide an optional action

在某些情况下,我们可能想在显示 SnackBar 的时候给用户提供一个附加的操作。比如,当他们意外的删除了一个消息,我们可以提供一个撤销更改的操作。

You might want to provide an action to the user when the SnackBar is displayed. For example, if the user accidentally deletes a message, they might use an optional action in the SnackBar to recover the message.

To achieve this, we can provide an additional action to the SnackBar Widget.

这个例子里,我们在创建 SnackBar widget 的时候提供一个附加的 action 参数。

Here’s an example of providing an additional action to the SnackBar widget:

final snackBar = SnackBar(
  content: Text('Yay! A SnackBar!'),
  action: SnackBarAction(
    label: 'Undo',
    onPressed: () {
      // Some code to undo the change.
    },
  ),
);

完整样例

Complete example

import 'package:flutter/material.dart';

void main() => runApp(SnackBarDemo());

class SnackBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SnackBar Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('SnackBar Demo'),
        ),
        body: SnackBarPage(),
      ),
    );
  }
}

class SnackBarPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        onPressed: () {
          final snackBar = SnackBar(
            content: Text('Yay! A SnackBar!'),
            action: SnackBarAction(
              label: 'Undo',
              onPressed: () {
                // Some code to undo the change.
              },
            ),
          );

          // Find the Scaffold in the widget tree and use
          // it to show a SnackBar.
          Scaffold.of(context).showSnackBar(snackBar);
        },
        child: Text('Show SnackBar'),
      ),
    );
  }
}

SnackBar Demo