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(...);
更多相关阅读:
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
SAP ABAP, Fiori, Android和Hybris里的异步操作
ABAP 其实ABAP的编程范式相对其他语言比较简单,没有太多异步操作。除了STARTING NEW TASK可以实现异步调用。Use ABAP Multi-Thread programming to deal with a real performance issue: https://blogs.sap.com/2017/02/10/use-abap-multi-thread-programming-to-deal-with-a-real-performance-issue/ Fiori 我们做Fiori开发的时候,处理过performance的incident。一个simple operation的roundtrip number不能大于3。2个几乎同时发出的异步操作算1个roundtrip。Fiori的best practice也是尽量用异步操作。 Android 成都Android开发团队2011~2013参与了Customer Briefing app的开发。如果在UI线程里访问了web resource,容易遇到ANR Android Not response的excep...
- 下一篇
简单五步,实现物联网批量创建设备
产品指某一类设备,创建完产品后,需要为具体设备创建身份。您可以创建单个设备,也可以批量创建设备。本文为您讲述如何批量创建设备。 操作步骤 1.登录物联网平台控制台。 2.在左侧导航栏,选择设备管理 > 设备,单击批量添加。 3.选择产品。新创建的设备将继承该产品的功能和特性。 4.选择设备名称的添加方式。 自动生成:无需为设备指定名称。填写设备数量后,系统将为每个设备自动生成由字母、数字随机组合成的DeviceName。 批量上传:需要为所有设备指定名称。单击下载.csv模板下载表格模板,在模板中填写设备名称,然后将填好的表格上传至控制台。 说明 填写模板时,请注意: 设备名称长度为4-32个字符,可包含英文字母、数字和特殊字符,包括连接号(-)、下划线(_)、at符号(@)、点号(.)和英文冒号(:)。 设备名称在产品维度具有唯一性。列表中的设备名称不可重复,且不可与该产品下已有设备的名称重复。 一个文件中最多可包含1,000个名称。 文件大小不超过2 MB。 5.单击确认,完成创建批量设备。 若批量上传的设备名称列表中有不合法的名称,将出现错误提示。请单击下载不合法列表,查看...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- CentOS7,8上快速安装Gitea,搭建Git服务器
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- Docker安装Oracle12C,快速搭建Oracle学习环境
- Windows10,CentOS7,CentOS8安装Nodejs环境
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS7,CentOS8安装Elasticsearch6.8.6
- CentOS8安装Docker,最新的服务器搭配容器使用
- 设置Eclipse缩进为4个空格,增强代码规范
- CentOS7安装Docker,走上虚拟化容器引擎之路