Flutter Widgets 之 SnackBar
注意:无特殊说明,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系列文章总览
- Flutter Widgets 之 Expanded和Flexible
- Flutter Widgets 之 AnimatedList
- Flutter Widgets 之 SliverAppBar
如果这篇文章有帮助到您,希望您来个“赞”并关注我的公众号,非常谢谢。
Flutter Widgets 之 SnackBar的更多相关文章
- 【Flutter Widgets大全】电子书开源
[Flutter Widgets大全]是老孟耗费大量精力整理的,总共有330多个组件的详细用法,开源到Github上,希望可以帮助到大家,开源不易,点个赞可不可以. [Flutter Widgets ...
- Flutter Widgets 之 InkWell 和 Ink
注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 InkWell InkWell组件在用户点击时出现&quo ...
- Flutter Widgets 之 FutureBuilder
注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 展示异步任务状态 当有一个Future(异步)任务需要展示 ...
- Flutter Widgets 之 BottomNavigationBar 和 BottomNavigationBarItem
注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 BottomNavigationBar 和 BottomN ...
- Flutter Widgets 之 ListWheelScrollView
注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 基础用法 在展示大量数据的时候我们第一会想到使用ListV ...
- Flutter Widgets 之 RichText
注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 基础用法 应用程序离不开文字的展示,因此文字的排版非常重要 ...
- Flutter Widgets 对话框-Dialog
注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 当应用程序进行重要操作时经常需要用户进行2次确认,以避免用 ...
- Flutter Widgets
Flutter Widgets Flutter 组件 Syncfusion Flutter Widgets 所有组件均支持即装即用的 Android,iOS和 Web not free https:/ ...
- Flutter Widgets (Container/Row/Column/Image)
俗话说知己知彼百战百胜,如果对Flutter 里面的各种Widgets不了解,那你就别想将它们组合成你想要的效果.从今天开始.会把一个一个的widget 撸一遍..知道它大概的用法.效果.当你想做某个 ...
随机推荐
- [HDU多校]Ridiculous Netizens
[HDU多校]Ridiculous Netizens 点分治 分成两个部分:对某一点P,连通块经过P或不经过P. 经过P采用树形依赖背包 不经过P的部分递归计算 树型依赖背包 v点必须由其父亲u点转移 ...
- (转)Navicat Premium 12.1.8.0安装与激活
http://www.mamicode.com/info-detail-2493067.html
- Java复习(五)接口与多态
5.1接口 允许创建者规定方法的基本形式:方法名.参数列表以及返回类型,但不规定方法主体. 也可以包含基本数据类型的数据成员,但他们都默认为static和final 声明格式为 [接口修饰符]inte ...
- iOS 类似外卖 两个tableView联动
在伯乐在线上看到一个挺好玩的文章,自己也参考文章实现了一下. 效果实现如图所示: 具体实现的内容可以参考原文,参考文章:<iOS 类似美团外卖 app 两个 tableView 联动效果实现&g ...
- springboot支付项目之日志配置
日志框架 本节主要内容: 1:常见的几种日志框架 2:Logback的使用 3:怎么配置info和error级别日志到不同文件中并且按照日期每天一个文件. 以上几个框架可以分类如下: SLF4J和Lo ...
- linux安装源码包报错
报错代码1如下: [root@xiaoming nginx-]# ./configure --prefix=/soft/nginx- checking for OS + Linux -.el7.x86 ...
- linux打开和关闭端口
查看哪些端口被打开 netstat -anp 关闭端口号:iptables -A INPUT -p tcp -drop 8080 -j DROP 打开端口号:iptables -A INPUT -p ...
- 2.Redis数据类型
Redis中存储数据是通过key-value存储的,对于value的类型有以下几种: 字符串 Hash类型 List Set SortedSet(zset) 注:在redis中的命令语句中,命令是忽略 ...
- 《C Prime Plus》第九节笔记
第九节 函数 9.1 复习函数 函数原型 function prototype 函数调用 function call 函数定义 function definition 形参 实参 典型的ANSI C函 ...
- springboot学习笔记:11.springboot+shiro+mysql+mybatis(通用mapper)+freemarker+ztree+layui实现通用的java后台管理系统(权限管理+用户管理+菜单管理)
一.前言 经过前10篇文章,我们已经可以快速搭建一个springboot的web项目: 今天,我们在上一节基础上继续集成shiro框架,实现一个可以通用的后台管理系统:包括用户管理,角色管理,菜单管理 ...