Flutter Snackbar

2025年3月17日 | 阅读 3 分钟

Flutter中的Snackbar是一个小部件，用于显示轻量级消息，当发生特定操作时会向用户简要通知。它会显示消息很短一段时间，当指定时间完成后，它将从屏幕上消失。默认情况下，snackbar显示在屏幕底部。这是一个向用户提供反馈的好方法。它还包含一些操作，允许用户撤消或重做任何操作。通常，snackbar与scaffold小部件一起使用。

SnackBar属性

以下是Flutter中使用的snackbar的重要属性

属性名称	描述
内容	它是snackbar的主要内容，实际上是一个文本小部件。
duration	它用于指定snackbar应该显示多长时间。
action	它用于在用户点击snackbar时采取行动。它不能被关闭或取消。我们只能在snackbar中撤消或重做。
elevation	它是snackbar放置的z坐标。它用于控制snackbar下方的阴影大小。
shape	它用于自定义snackbar的形状。
行为	它用于设置snackbar的位置。
背景颜色	它指定snackbar的背景。
动画	它定义了snackbar的退出和入口。

如果我们在移动应用程序中使用snackbar，它允许用户获取有关其在应用程序中的操作的信息。在本文中，我们将学习如何使用以下步骤在Flutter中添加和显示SnackBar

在您正在使用的IDE中创建一个项目。
创建一个Scaffold小部件。
显示一个SnackBar小部件。
提供一个可选操作。

步骤 1： 在您使用的IDE中创建一个Flutter项目，然后在Android Studio中打开该项目。打开项目后，我们需要导航到lib文件夹并打开main.dart文件。

步骤 2： 创建一个Scaffold小部件，负责视觉结构并确保基本小部件不重叠。

Scaffold(
  appBar: AppBar(
    title: Text(' SnackBar Example'),
  ),
  body: SnackBarPage(),
);

步骤 3： 接下来，我们需要显示一个SnackBar。因此，在Scaffold小部件中创建一个snackbar，如下所示

final snackBar = SnackBar(content: Text(' Hey! I am a SnackBar message.'));

// Here, we will use the scaffold widget to show a 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: () {
      // Write your code to undo the change.
    },
  ),
);

让我们看一下上述步骤的完整代码。打开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。

如果单击“显示SnackBar”按钮，我们将在屏幕底部看到该消息。此消息将在完成指定时间后自动删除。参见下面的屏幕截图

下一个主题Flutter Tooltip

← 上一步下一步 →

Flutter Snackbar

SnackBar属性

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Flutter 教程

Dart 编程

Flutter 基础

Flutter 小部件

Flutter 路由

高级概念

差异

面试题

Flutter Snackbar

SnackBar属性

相关帖子

Flutter 图表

Flutter 开关

Flutter Stack

Flutter 按钮

Flutter 日历

Flutter 抽屉

Flutter 文本字段

Flutter 进度条

Flutter Tooltip

Flutter 表单

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器