专栏首页吴老师移动开发[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仓库

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客:https://www.jianshu.com/u/81e1a1228180复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • Flutter基础widgets教程-SnackBar篇

    青年码农
  • Snackbar使用详解

    Snackbar是介于Toast与Dialog之间的一个控件,既可以像Toast一样自动消失,也可以像Dialog一样交互消失。

    yechaoa
  • Android--Snackbar基本使用以及源码分析

    aruba
  • Flutter 构建完整应用手册-设计基础知识 顶

    这本食谱包含演示如何在写Flutter应用程序时解决常见问题的食谱。 每个配方都是独立的,可以作为参考帮助您构建应用程序。

    南郭先生
  • Flutter 构建完整应用手册-处理手势

    我们不仅希望向用户展示信息,还希望我们的用户与我们的应用进行互动! 那么,我们如何回应基本操作,如点击和拖动? 我们将使用GestureDetector部件!

    南郭先生
  • Flutter - 处理手势

    参考: https://flutter.io/cookbook/gestures/handling-taps/

    AnRFDev
  • Flutter Widgets 之 SnackBa

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

    老孟Flutter
  • Flutter中的操作提示

    在前面的文章中我们学习了Flutter中输入以及选择控件的用法,借助于这些组件大家可以完成很多常用的功能,但是他不能及时在用户操作后完成相应的界面提示,所以今天...

    flyou
  • Android中Snackbar的使用方法及小技巧

    Snackbar和Toast相似,都是为了给用户提供交互信息,Snackbar是固定在底部的,显示时从下往上滑出

    砸漏
  • Flutter 2 正式出道(一)

    相信不少人昨晚熬夜奋战,观看了Flutter Engage大会,Flutter团队也正式官宣了Flutter 2。从Flutter 1.0正式版到Flutter...

    JarvanMo
  • 编写 vuetify 全局 snackbar

    4O4
  • 浅谈SnackBar(Toast大兄弟)

    听着music睡
  • 轻量级控件SnackBar使用以及源码分析

    本篇博客将会给大家带来一个轻量级控件SnackBar,为什么要讲SnackBar?Snackbar:的提出实际上是界于Toast和Dialog的中间产物。因为T...

    老马的编程之旅
  • Flutter 中可定制的时间规划器

    Flutter 从一开始就是一场伟大的邂逅。构建引人入胜的 UI 从未如此快速。无论您是业余爱好者还是有教养的开发人员,都不难对 Flutter 产生无可救药的...

    老孟Flutter
  • [译] 在 SnackBar,Navigation 和其他事件中使用 LiveData(SingleLiveEvent 案例)

    Android 开发者
  • Flutter 入门指北之弹窗和提示(干货)

    例如我们需要实现一个功能,修改某个值,修改后给用户一个提示,同时给用户一个撤销该操作的按钮,那么就可以通过 SnackBar 来简单实现。还有就是 SnackB...

    陈宇明
  • Material Design整理(二)——SnackBar

    蜻蜓队长
  • 【Flutter桌面篇】Flutter&Windows应用尝鲜

    张风捷特烈
  • Flutter 小技巧之优化你使用的 BuildContext

    Flutter 里的 BuildContext 相信大家都不会陌生,虽然它叫 Context,但是它实际是 Element 的抽象对象,而在 Flutte...

    GSYTech

扫码关注腾讯云开发者

领取腾讯云代金券