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

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

基础用法

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

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

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

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

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

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

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

效果如下:

通过shape属性设置其形状:

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

效果如下:

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

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

floating效果:

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

Scaffold.of(context).showSnackBar(SnackBar(
content: Row(
children: <Widget>[
Icon(Icons.check,color: Colors.green,),
Text('下载成功')],
),
action: SnackBarAction(
label: '知道了',
onPressed: (){},
),
));

效果:

瞬间多个弹出延迟问题

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

RaisedButton(
child: Text(
'点我,弹出SnackBar',
),
onPressed: () { List.generate(10, (index){
Scaffold.of(context).showSnackBar(SnackBar(
content: Text('我是消息:$index'),
));
});
},
)

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

Scaffold.of(context).removeCurrentSnackBar();
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. ansible批量部署模块(二)

    回顾:Ansible: 无需客户端程序 只要有SSH 模块化 ansible帮助工具ansible-doc 模块名ansible-doc 模块名 -s 列出该模块的所有选项ansible-doc -l ...

  2. linkage disequilibrium|linkage equilibrium

    I.9 Linkage INDEPENDENCE OF GENOTYPES AT TWO LOCI:若A,B是两个独立位点:PA是基因A的概率,PB是基因B的概率.因为基因A与基因B是相互独立的位点, ...

  3. android searchview 简单使用

    设置样式 drawable bg_search/xml android:background="@drawable/bg_search" <shape xmlns:andro ...

  4. Spring IOC 和AOP

    Spring是什么? Spring是一个轻量级的IoC和AOP容器框架. IOC:IOC就是控制反转,控制反转指的是把创建对象和管理对象之间的依赖关系交给了IOC容器来管理.以前new对象由程序员来控 ...

  5. android studio 通过界面快速查看md5

    https://www.jianshu.com/p/989c0be557f0

  6. Seikimatsu Occult Tonneru(网络流,状态数(建不建边)不多时,可考虑直接进行枚举

    http://acm.hdu.edu.cn/showproblem.php?pid=4309 总结:边可存东西时,可新建一个点x连接u.v,x再连向汇点: #include<iostream&g ...

  7. 绿洲作业第一周 - 美术Art work

    Dear parents, Please remind your child to learn and finish the work as follows from the art teacher: ...

  8. 系统学习javaweb4----CSS层叠样式表(结束)

    摘要:这几天临近过年,事情有点多,学习总是段段续续的,今天总算完成了CSS的基本知识学习. 学习笔记: 西瓜学习javaweb 1.css简述. 1.1 css是什么?有什么作用? HTML----- ...

  9. 网站爬取-案例三:今日头条抓取(ajax抓取JS数据)

    今日头条这类的网站制作,从数据形式,CSS样式都是通过数据接口的样式来决定的,所以它的抓取方法和其他网页的抓取方法不太一样,对它的抓取需要抓取后台传来的JSON数据,先来看一下今日头条的源码结构:我们 ...

  10. 浙江省第十六届大学生ACM程序设计竞赛部分题解

    E .Sequence in the Pocket sol:将数组copy一份,然后sort一下,找寻后面最多多少个元素在原数组中保持有序,用总个数减去已经有序的就是我们需要移动的次数. 思维题 #i ...