显示 snackbars

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

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

1. 创建一个 Scaffold

2. 显示一个 Scaffold

3. 提供一个附加的操作

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

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

return MaterialApp(
  title: 'SnackBar Demo',
  home: Scaffold(
    appBar: AppBar(
      title: const Text('SnackBar Demo'),
    ),
    body: const SnackBarPage(),
  ),
);

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

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

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

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

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

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

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

import 'package:flutter/material.dart';

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

class SnackBarDemo extends StatelessWidget {
  const SnackBarDemo({super.key});

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

class SnackBarPage extends StatelessWidget {
  const SnackBarPage({super.key});

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

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

除非另有说明，本文档之所提及适用于 Flutter 的最新稳定版本，本页面最后更新时间: 2024-08-05。 查看文档源码 或者 为本页面内容提出建议。