注意:无特殊说明,Flutter版本及Dart版本如下:

  • Flutter版本: 1.12.13+hotfix.5
  • Dart版本: 2.7.0

基础用法

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

等Toast,在Flutter中使用SnackBar组件,用法如下:

  1. Scaffold.of(context).showSnackBar(SnackBar(
  2. content: Text('老孟,一枚有态度的程序员'),
  3. ));

注意并不是在build方法中直接使用SnackBar组件,而是调用Scaffold.of(context).showSnackBar方法,消息会在底部弹出并显示一段时间,默认显示4秒,然后弹出,我们可以设置其显示的时间:

  1. Scaffold.of(context).showSnackBar(SnackBar(
  2. duration: Duration(seconds: 1),
  3. ));

显示的时间为1秒,content属性不一定是文字,也可以是其他组件,比如显示一个图标和文字:

  1. Scaffold.of(context).showSnackBar(SnackBar(
  2. content: Row(
  3. children: <Widget>[
  4. Icon(Icons.check,color: Colors.green,),
  5. Text('下载成功')],
  6. ),
  7. duration: Duration(seconds: 1),
  8. ));

效果如下:

通过shape属性设置其形状:

  1. Scaffold.of(context).showSnackBar(SnackBar(
  2. content: Row(
  3. children: <Widget>[
  4. Icon(Icons.check,color: Colors.green,),
  5. Text('下载成功')],
  6. ),
  7. shape: RoundedRectangleBorder(
  8. borderRadius: BorderRadius.all(Radius.circular(50))
  9. ),
  10. duration: Duration(seconds: 1),
  11. ));

效果如下:

SnackBar的有2种弹出形式,默认是fixed,直接在底部弹出,另一种是floating,悬浮在底部,用法如下:

  1. Scaffold.of(context).showSnackBar(SnackBar(
  2. content: Row(
  3. children: <Widget>[
  4. Icon(Icons.check,color: Colors.green,),
  5. Text('下载成功')],
  6. ),
  7. behavior: SnackBarBehavior.floating,
  8. ));

floating效果:

我们还可以对SnackBar增加行为组件,比如增加一个“知道了”按钮,点击“知道了”,消息马上隐藏,用法如下:

  1. Scaffold.of(context).showSnackBar(SnackBar(
  2. content: Row(
  3. children: <Widget>[
  4. Icon(Icons.check,color: Colors.green,),
  5. Text('下载成功')],
  6. ),
  7. action: SnackBarAction(
  8. label: '知道了',
  9. onPressed: (){},
  10. ),
  11. ));

效果:

瞬间多个弹出延迟问题

当短时间内多次调用SnackBar方法时,SnackBar消息将会以队列的形式一个一个的弹出,比如下面的代码:

  1. RaisedButton(
  2. child: Text(
  3. '点我,弹出SnackBar',
  4. ),
  5. onPressed: () {
  6. List.generate(10, (index){
  7. Scaffold.of(context).showSnackBar(SnackBar(
  8. content: Text('我是消息:$index'),
  9. ));
  10. });
  11. },
  12. )

默认情况下每个显示4秒,如果有10个,那么40秒内会一直弹消息,体验明显不友好,我们希望的效果是如果有新的消息时,旧的都消息立刻消失,显示新的消息,只需在弹出新的SnackBar时移除现在的SnackBar,

  1. Scaffold.of(context).removeCurrentSnackBar();
  2. Scaffold.of(context).showSnackBar(...);

更多相关阅读:

如果这篇文章有帮助到您,希望您来个“赞”并关注我的公众号,非常谢谢。

Flutter Widgets 之 SnackBar的更多相关文章

  1. 【Flutter Widgets大全】电子书开源

    [Flutter Widgets大全]是老孟耗费大量精力整理的,总共有330多个组件的详细用法,开源到Github上,希望可以帮助到大家,开源不易,点个赞可不可以. [Flutter Widgets ...

  2. Flutter Widgets 之 InkWell 和 Ink

    注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 InkWell InkWell组件在用户点击时出现&quo ...

  3. Flutter Widgets 之 FutureBuilder

    注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 展示异步任务状态 当有一个Future(异步)任务需要展示 ...

  4. Flutter Widgets 之 BottomNavigationBar 和 BottomNavigationBarItem

    注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 BottomNavigationBar 和 BottomN ...

  5. Flutter Widgets 之 ListWheelScrollView

    注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 基础用法 在展示大量数据的时候我们第一会想到使用ListV ...

  6. Flutter Widgets 之 RichText

    注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 基础用法 应用程序离不开文字的展示,因此文字的排版非常重要 ...

  7. Flutter Widgets 对话框-Dialog

    注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 当应用程序进行重要操作时经常需要用户进行2次确认,以避免用 ...

  8. Flutter Widgets

    Flutter Widgets Flutter 组件 Syncfusion Flutter Widgets 所有组件均支持即装即用的 Android,iOS和 Web not free https:/ ...

  9. Flutter Widgets (Container/Row/Column/Image)

    俗话说知己知彼百战百胜,如果对Flutter 里面的各种Widgets不了解,那你就别想将它们组合成你想要的效果.从今天开始.会把一个一个的widget 撸一遍..知道它大概的用法.效果.当你想做某个 ...

随机推荐

  1. [HDU多校]Ridiculous Netizens

    [HDU多校]Ridiculous Netizens 点分治 分成两个部分:对某一点P,连通块经过P或不经过P. 经过P采用树形依赖背包 不经过P的部分递归计算 树型依赖背包 v点必须由其父亲u点转移 ...

  2. (转)Navicat Premium 12.1.8.0安装与激活

    http://www.mamicode.com/info-detail-2493067.html

  3. Java复习(五)接口与多态

    5.1接口 允许创建者规定方法的基本形式:方法名.参数列表以及返回类型,但不规定方法主体. 也可以包含基本数据类型的数据成员,但他们都默认为static和final 声明格式为 [接口修饰符]inte ...

  4. iOS 类似外卖 两个tableView联动

    在伯乐在线上看到一个挺好玩的文章,自己也参考文章实现了一下. 效果实现如图所示: 具体实现的内容可以参考原文,参考文章:<iOS 类似美团外卖 app 两个 tableView 联动效果实现&g ...

  5. springboot支付项目之日志配置

    日志框架 本节主要内容: 1:常见的几种日志框架 2:Logback的使用 3:怎么配置info和error级别日志到不同文件中并且按照日期每天一个文件. 以上几个框架可以分类如下: SLF4J和Lo ...

  6. linux安装源码包报错

    报错代码1如下: [root@xiaoming nginx-]# ./configure --prefix=/soft/nginx- checking for OS + Linux -.el7.x86 ...

  7. linux打开和关闭端口

    查看哪些端口被打开  netstat -anp 关闭端口号:iptables -A INPUT -p tcp -drop 8080 -j DROP 打开端口号:iptables -A INPUT -p ...

  8. 2.Redis数据类型

    Redis中存储数据是通过key-value存储的,对于value的类型有以下几种: 字符串 Hash类型 List Set SortedSet(zset) 注:在redis中的命令语句中,命令是忽略 ...

  9. 《C Prime Plus》第九节笔记

    第九节 函数 9.1 复习函数 函数原型 function prototype 函数调用 function call 函数定义 function definition 形参 实参 典型的ANSI C函 ...

  10. springboot学习笔记:11.springboot+shiro+mysql+mybatis(通用mapper)+freemarker+ztree+layui实现通用的java后台管理系统(权限管理+用户管理+菜单管理)

    一.前言 经过前10篇文章,我们已经可以快速搭建一个springboot的web项目: 今天,我们在上一节基础上继续集成shiro框架,实现一个可以通用的后台管理系统:包括用户管理,角色管理,菜单管理 ...