顯示 Snackbar

當某些動作發生時，短暫地通知您的使用者會很有用。例如，當使用者在清單中滑開訊息時，您可能想要通知他們該訊息已刪除。您甚至可能想要給他們還原動作的選項。

在 Material Design 中，這是 SnackBar 的工作。本食譜使用以下步驟實作 snackbar

1. 建立 Scaffold。
2. 顯示 SnackBar。
3. 提供選用的動作。

在建立遵循 Material Design 指南的應用程式時，請為您的應用程式提供一致的視覺結構。在此範例中，將 SnackBar 顯示在螢幕底部，而不會與其他重要的 Widget 重疊，例如 FloatingActionButton。

來自 material 函式庫的 Scaffold Widget 會建立這種視覺結構，並確保重要的 Widget 不會重疊。

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 顯示時，您可能想要為使用者提供一個動作。例如，如果使用者不小心刪除訊息，他們可以使用 SnackBar 中的可選動作來復原訊息。

以下是一個範例，說明如何為 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-07-06。 檢視原始碼 或回報問題。