显示 Snackbar
当某些动作发生时,简要地通知用户会很有用。例如,当用户滑动删除列表中的一条消息时,你可能需要告知他们该消息已被删除。你甚至可能希望提供一个选项让他们撤销该动作。
在 Material Design 中,这是 SnackBar
的职责。本食谱通过以下步骤实现一个 SnackBar
- 创建一个
Scaffold
。 - 显示一个
SnackBar
。 - 提供一个可选的动作。
1. 创建一个 Scaffold
#在创建遵循 Material Design 指南的应用程序时,为你的应用程序提供一致的视觉结构。在此示例中,SnackBar
显示在屏幕底部,而不会与其他重要的小部件(例如 FloatingActionButton
)重叠。
来自 material 库的 Scaffold
小部件创建了这种视觉结构,并确保重要的小部件不会重叠。
dart
return MaterialApp(
title: 'SnackBar Demo',
home: Scaffold(
appBar: AppBar(title: const Text('SnackBar Demo')),
body: const SnackBarPage(),
),
);
2. 显示一个 SnackBar
#有了 Scaffold
,就可以显示一个 SnackBar
。首先,创建一个 SnackBar
,然后使用 ScaffoldMessenger
显示它。
dart
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);
3. 提供一个可选的动作
#你可能希望在显示 SnackBar 时为用户提供一个动作。例如,如果用户不小心删除了消息,他们可以使用 SnackBar 中的可选动作来恢复消息。
这是一个为 SnackBar
小部件提供额外 action
的示例
dart
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'),
),
);
}
}