Flutter Widgets 之 SnackBar
2024-09-07 07:40:29
注意:无特殊说明,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
如果这篇文章有帮助到您,希望您来个“赞”并关注我的公众号,非常谢谢。
最新文章
- 高程(3):操作符、for、for...in循环、break/continue/return语句、函数等
- git 教程(14)--解决冲突
- 数据注解和验证 &ndash; ASP.NET MVC 4 系列
- Leetcode Bulb Switcher
- 【bzoj1018】 SHOI2008—堵塞的交通traffic
- 在docker 中搭建gitlab环境
- 【Python与机器学习】:利用Keras进行多类分类
- 详解Bootstrap面板组件
- Https协议:SSL建立过程分析(也比较清楚,而且有OpenSSL的代码)
- VC编程之设置客户区背景图片
- LifecyclePhaseNotFoundException(转)
- 间支付系统,DataGridView
- 洗礼灵魂,修炼python(5)--python操作符,内置函数
- JQuery EasyUI combobox(下拉列表框)
- NOIP2017感想
- 菜鸟入门【ASP.NET Core】3:准备CentOS和Nginx环境转(转)
- SQL语言分类DQL,DML,DDL,DCL,DTL
- hibernate文档头的不同版本
- EF和LINQ 调用存储过程
- 简单理解AOP(面向切面编程)