Flutter - Snackbar

Flutter - Snackbar 首页 / Flutter入门教程 / Flutter - Snackbar

Flutter中的Snackbar是一个显示轻量级消息的窗口小部件,该消息在发生某些操作时会短暂地通知用户。它会在很短的时间内显示该消息,并且在指定的时间完成后,该消息将从屏幕上消失。

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中创建项目。
  2. 创建一个Scaffold Widget。
  3. 显示一个SnackBar widget。
  4. 提供一个可选的操作。

步骤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无涯教程网

Flutter Snackbar

如果无涯教程点击"show snackbar"按钮,无涯教程将在屏幕底部看到消息。完成指定时间后,将自动删除此消息。请参阅下面的屏幕截图:

Flutter Snackbar

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

微服务架构核心20讲 -〔杨波〕

10x程序员工作法 -〔郑晔〕

深入拆解Tomcat & Jetty -〔李号双〕

Linux实战技能100讲 -〔尹会生〕

如何看懂一幅画 -〔罗桂霞〕

网络排查案例课 -〔杨胜辉〕

说透元宇宙 -〔方军〕

结构学习力 -〔李忠秋〕

Rust 语言从入门到实战 -〔唐刚〕

好记忆不如烂笔头。留下您的足迹吧 :)