Flutter中的Snackbar是一个显示轻量级消息的窗口小部件,该消息在发生某些操作时会短暂地通知用户。它会在很短的时间内显示该消息,并且在指定的时间完成后,该消息将从屏幕上消失。
以下是Flutter中使用的小吃店的重要属性:
属性名称 | 描述 |
---|---|
content | 它是snack bar的主要内容,它实际上是一个文本小部件(text widget)。 |
duration | 它用于指定应显示snack bar的时间。 |
action | 当用户点击snack bar时,它将会执行。 |
elevation | 放置snack bar的位置是z坐标。它用于控制snack bar下方的阴影大小。 |
shape | 它用于自定义snack bar的形状。 |
behavior | 它用于设置snack bar的位置。 |
bagroundcolor | 它指定snack bar的背景。 |
animation | 它定义了snack bar的动画。 |
如果无涯教程在移动应用程序中使用了snack bar,则它允许用户获取有关其在该应用程序中的操作的信息。在本文中,无涯教程将学习如何使用以下步骤在Flutter中添加和显示SnackBar:
步骤1:在您正在使用的IDE中创建Flutter项目,然后在Android Studio中打开该项目。打开项目后,无涯教程需要导航到lib文件夹并打开main.dart文件。
步骤2:创建负责布局结构的脚手架小部件,并确保基本小部件不重叠。
Scaffold( appBar: AppBar( title: Text(' SnackBar Example'), ), body: SnackBarPage(), );
步骤3:接下来,无涯教程需要显示一个SnackBar。因此,在“脚手架”小部件中创建一个SnackBar,如下所示:
final snackBar = SnackBar(content: Text(' Hey! I am a SnackBar message.')); // 在这里,我们将使用脚手架小部件来显示snack bar。 Scaffold.of(context).showSnackBar(snackBar);
步骤4:接下来,无涯教程可以向SnackBar添加一些操作。例如,假设用户不小心删除了一条消息或发送了一封邮件,那么无涯教程可以在SnackBar中提供一个可选操作来恢复这些消息。下面的演示代码对其进行了更清晰的说明:
final snackBar = SnackBar( content: Text(' Hey! I am a SnackBar message.'), action: SnackBarAction( label: 'Undo', onPressed: () { //编写代码以撤消更改。 }, ), );
让无涯教程查看上述步骤的完整代码。打开 main.dart 文件并替换以下代码。此代码包含一个按钮,当用户提供时,它将显示SnackBar消息。它还包含撤消或重做更改的操作。
import 'package:flutter/material.dart'; void main() {runApp(MyApp());} class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: new ThemeData( primaryColor: const Color(0xFF43a047), accentColor: const Color(0xFFffcc00), primaryColorBrightness: Brightness.dark, ), home: Scaffold( appBar: AppBar( title: Text('Flutter SnackBar Demo'), ), body: SnackBarPage(), ), ); } } class SnackBarPage extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: RaisedButton( child: Text('Show SnackBar', style: TextStyle(fontSize: 25.0),), textColor: Colors.white, color: Colors.redAccent, padding: EdgeInsets.all(8.0), splashColor: Colors.grey, onPressed: () { final snackBar = SnackBar( content: Text('Hey! This is a SnackBar message.'), duration: Duration(seconds: 5), action: SnackBarAction( label: 'Undo', onPressed: () { //Some code to undo the change. }, ), ); Scaffold.of(context).showSnackBar(snackBar); }, ), ); } }
当无涯教程运行此应用时,它将显示如下屏幕屏幕的UI。
链接:https://www.learnfk.comhttps://www.learnfk.com/flutter/flutter-snackbar.html
来源:LearnFk无涯教程网
如果无涯教程点击"show snackbar"按钮,无涯教程将在屏幕底部看到消息。完成指定时间后,将自动删除此消息。请参阅下面的屏幕截图:
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)