如何在Flutter中显示一个SnackBar。带实例的教程

尼耳多
1,454 阅读5分钟

在本教程中，我们将向您介绍Flutter SnackBar类，它是在Flutter中实现Material Design的众多小工具之一。我们将介绍该部件的一些最重要的功能，概述在Flutter应用程序中定制和显示SnackBar的步骤，并通过一些真实世界的例子来展示SnackBar的实际工作情况。

要继续学习，您应该对Flutter应用开发有基本的了解，并有一些使用SDK构建跨平台应用的经验。

不多说了，让我们开始吧

什么是SnackBar类？

SnackBar是一个Flutter小部件，使您能够在您的应用程序中临时显示一个弹出式信息。它通常出现在应用程序的屏幕底部。

例如，您可以使用 SnackBar widget 来让用户知道所选物品已被添加到购物车或被删除，或者表明一个表单已被发送或图片已成功上传。

在Flutter应用程序中实现SnackBar的注意事项

在实现SnackBar时，您应该考虑以下特点和/或功能。

频率

这涉及到SnackBar在应用程序中显示的时间。始终牢记，SnackBar不应该分散最终用户对应用程序主要目标的注意力。

这也是为什么零食栏通常被放置在应用程序屏幕的底部的原因之一。建议SnackBar在Flutter应用程序中显示的时间为4到10秒，不能再长。

行动

尽管如前所述，SnackBar在一定时间后会从应用程序的屏幕上消失，而不需要用户的互动，但实施某种互动元素来配合您的信息是一个好的做法。

例如，你可以创建一个带有标签的行动按钮，如 "解散 "或 "再试一次"，并将其附加到SnackBar部件上。

信息性

SnackBar小组件在Flutter应用程序中最常见和最关键的用例之一是传达有关应用程序进程的重要信息。举个简单的例子，当用户点击按钮提交表单、上传文件等时，SnackBar可能会显示 "成功 "这样的信息。

构建、显示和定制SnackBar

要开始构建、显示和设计你的SnackBar，首先要完成以下步骤。

  1. 启动Android Studio或您选择的另一个IDE
  2. 启动一个新的Flutter项目
  3. 选择Flutter应用程序，并将项目命名为 "snackbardemo "之类的。

注意：如果您在尝试编译和运行代码时遇到 "安全功能为空 "的错误，您可以通过将Flutter升级到2.12或更高版本来解决这个问题。

要升级到最新版本的Flutter，请点击Android Studio中的终端标签，并运行以下命令。

flutter upgrade

接下来，清除除了void main() => runApp(MyApp()); ，也就是Flutter在创建新项目时生成的代码。我们这样做是因为我们想从头开始构建。

现在你的编辑器里应该有这样的东西。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

现在，将MyApp() 改为const SnackBarDisplay() 。

void main() => runApp(SnackBarDisplay());

void main() 是Dart程序的主要入口点。Flutter使用runApp() 函数或方法作为应用程序的根部件。

在这里，我们正在创建一个widget，我们将其命名为SnackBarDisplay 。这将是我们应用程序的根。

在void man() 之后输入下面的代码。SnackBarDisplay 扩展了StatelessWidget ，使SnackBarDisplay 成为一个widget。

class SnackBarDisplay extends StatelessWidget {
  const SnackBarDisplay({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Displaying a SnackBar',
      home: Scaffold(
        backgroundColor: (Colors.grey),
        appBar: AppBar(
          title: const Text('Displaying a SnackBar'),
          backgroundColor: Colors.black12,
        ),
        body: const SnackBarPage(),
      ),
    );
  }
}

我们正在利用Material Design库来创建应用程序的结构。Material是谷歌拥有的一个开源设计系统，用于定制Android、Flutter、iOS和Web应用程序。如前所述，Flutter有各种各样的Material部件。

Scaffold widget提供了默认的应用栏，一个标题和一个主体属性，它持有我们主屏幕的widget树，home: Scaffold() 。Scaffold widget是显示SnackBar的必要条件。

backgroudColor: (Colors.grey) 是用来改变Flutter应用程序的默认背景的。

接下来，通过使用下面的代码创建SnackBar部分。在这里，当用户点击按钮时，将显示SnackBar。

class SnackBarPage extends StatelessWidget {
  const SnackBarPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () {
          final snackBar = SnackBar(
            content: const Text('Hi, I am a SnackBar!'),
            backgroundColor: (Colors.black12),
            action: SnackBarAction(
              label: 'dismiss',
              onPressed: () {
              },
            ),
          );
          ScaffoldMessenger.of(context).showSnackBar(snackBar);
        },
        child: const Text(
          'Click to Display a SnackBar',
        ),
      ),
    );
  }
}

在上面的代码中，我们有构建小部件--Widget build(BuildContext context) ，这里不值一提的是BuildContext 参数，它指定了小部件的构建位置。

在这个例子中，我们正在构建一个自定义的widget按钮，ElevatedButton ，它将在应用程序屏幕的中心位置。ElevatedButton 是一个放置在return Center 上的子部件。

然后，我们使用ScaffoldMessenger 类来显示SnackBar。

最后，运行该程序。你应该看到像这样的东西。

Click to Display SnackBar

点击按钮将显示SnackBar，其信息如下。"嗨，我是一个SnackBar！"

SnackBar Message on Bottom of Screen

结论

我希望你觉得这个教程很有见地。Flutter使得跨移动平台和网络构建应用程序变得容易。Flutter的核心是widget。SnackBar小组件使您可以轻松地与您的用户分享重要的信息，以帮助他们最大限度地利用您的Flutter应用程序。

您可以通过浏览我们的Flutter文章和教程集来了解更多关于Flutter的信息。

编码愉快!

The postHow to display a SnackBar in Flutter:有例子的教程首次出现在LogRocket博客上。

avatar
文章
阅读
粉丝