专栏首页吴老师移动开发[Flutter]使用SnackBar

[Flutter]使用SnackBar

先看一下什么是SnackBar,如下图:

image

SnackBar是用户操作后,显示提示信息的一个控件,类似Toast,会自动隐藏。它还可以添加操作按钮,等等。SnackBar是通过ScaffoldshowSnackBar方法来显示的。所以要显示一个SnackBar,要先拿到Scaffold。

创建Scaffold

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

显示SnackBar

首先创建一个SnackBar,再通过Scaffold的方法来显示。

final snackBar = new SnackBar(content: new Text('这是一个SnackBar!'));

Scaffold.of(context).showSnackBar(snackBar);

给SnackBar添加一个操作按钮

有时候,我们可能会想在显示的提示信息上添加一些操作。例如提示用户删除了一条消息,可以在提示信息上添加一个撤消的按钮,要达到这个效果,我们可以在SnackBar上添加一个操作按钮。

final snackBar = new SnackBar(
    context: new Text('删除信息'),
    action: new SnackBarAction(
        label: '撤消',
        onPressed: () {
            // do something to undo
        }
    ),
);

注意事项

当BuildContext在Scaffold之前时,调用Scaffold.of(context)会报错。这时可以通过Builder Widget来解决,代码如下:

body: new Builder(builder: (BuildContext context) {
          return new Center(
            child: new GestureDetector(
              onTap: () {
                final snackBar =
                    new SnackBar(content: new Text('这是一个SnackBar'));
                Scaffold.of(context).showSnackBar(snackBar);
              },
              child: new Text('显示SnackBar'),
            ),
          );
        })

关于学习

flutter的学习文章及代码都整理在这个github仓库

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [Flutter]使用主题

    使用主题可以在App里面共享颜色和字体样式。在Flutter里面有两种方式来使用主题,一种是全局范围的、一种是使用Theme Widget, Theme Wid...

    吴老师
  • [Flutter]使用顶部切换导航TabBar

    目前移动开发tab切换是一个很通用的功能,Flutter 通过Material 库提供了很方便的API来使用tab切换。

    吴老师
  • Flutter TextStyle参数解析关于学习

    吴老师
  • Flutter Widgets 之 SnackBa

    应用程序有时候需要弹出消息提示用户,比如‘网络连接失败’、‘下载成功’等提示,就像Android

    老孟Flutter
  • 从websocket看go的应用

    Go是互联网时代的通用编程语言。这样它就和命令行时代的C语言、图示界面时代的C++、以及互联网早期的Java语言等有不同的侧重。它强调保持自身的精巧和独立,从而...

    李海彬
  • 从websocket看go的应用

    Go是互联网时代的通用编程语言。这样它就和命令行时代的C语言、图示界面时代的C++、以及互联网早期的Java语言等有不同的侧重。它强调保持自身的精巧和独立,从而...

    李海彬
  • 从websocket看go的应用

    Go是互联网时代的通用编程语言。这样它就和命令行时代的C语言、图示界面时代的C++、以及互联网早期的Java语言等有不同的侧重。它强调保持自身的精巧和独立,从而...

    李海彬
  • Python项目可以有多大?最多可以有多少行代码?

    导读:总是看到有人说,动态一时爽,重构火葬场。然而这世界上有的是著名的开源项目, 也有像 Github、Instagram 这样流量巨大的知名网站是基于动态语言...

    IT派
  • Python项目可以有多大?最多可以有多少行代码?

    导读:总是看到有人说,动态一时爽,重构火葬场。然而这世界上有的是著名的开源项目, 也有像 Github、Instagram 这样流量巨大的知名网站是基于动态语言...

    华章科技
  • 代码行数最多的 Python 项目是?

    小小科

扫码关注云+社区

领取腾讯云代金券