显示 Snackbar

在某些操作发生时，短暂地通知用户可能很有用。例如，当用户在列表中滑动删除一条消息时，您可能希望通知他们消息已被删除。您甚至可能想给他们一个撤消操作的选项。

在 Material Design 中，这是 SnackBar 的作用。此配方使用以下步骤实现 Snackbar：

1. 创建一个 Scaffold。
2. 显示一个 SnackBar。
3. 提供可选操作。

在创建遵循 Material Design 指南的应用程序时，请为您的应用程序提供一致的视觉结构。在此示例中，在屏幕底部显示 SnackBar，并且不与其他重要的部件（例如 FloatingActionButton）重叠。

来自 material 库 的 Scaffold 小部件创建此视觉结构，并确保重要的部件不会重叠。

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!'),
);

// 在 widget 树中查找 ScaffoldMessenger
// 并使用它来显示 SnackBar。
ScaffoldMessenger.of(context).showSnackBar(snackBar);

当显示 SnackBar 时，您可能希望向用户提供一个操作。例如，如果用户意外删除了一条消息，他们可以使用 SnackBar 中的可选操作来恢复该消息。

以下是为 SnackBar 小部件提供附加 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 的最新稳定版本。页面最后更新于 2025-01-30。 查看源代码 或 报告问题。