1. 基本介绍
SnackBar 是一个常见的底部消息弹框。
2. 示例代码
代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。
3. 属性介绍
| SnackBar属性 | 介绍 |
|---|---|
| content | @required 左侧内容 Widget |
| backgroundColor | 背景色 |
| elevation | 阴影高度 |
| shape | 形状 ShapeBorder |
| behavior | SnackBarBehavior.fixed 是贴合屏幕边框的，SnackBarBehavior.floating 是悬浮出来的一个弹框 |
| action | SnackBarAction，右侧事件按钮 |
| duration | 弹框展示时长，默认为 Duration(milliseconds: 4000) |
| animation | 动画效果，没啥太大用，使用 showSnackBar，会被自带动画替换 |
| onVisible | SnackBar 展示在屏幕上时的回调函数 |
| SnackBarAction属性 | 介绍 |
|---|---|
| textColor | 字体颜色 |
| disabledTextColor | 不可用时字体颜色 |
| label | 事件文字 |
| onPressed | @required 点击事件 |
4. SnackBar 详解
4.1 简单的 SnackBar
import 'package:flutter/material.dart';
class FMSnackBarVC extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(title: Text("SnackBar"),),
body: ListView(
children: [
FMNormalSnackBarBtn(),
],
),
);
}
}
class FMNormalSnackBarBtn extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return RaisedButton(
child: Text("Noraml SnackBar"),
onPressed: (){
Scaffold.of(context).showSnackBar(_normalSnackBar());
},
);
}
SnackBar _normalSnackBar(){
return SnackBar(
content: Text("SnackBar"),
backgroundColor: Colors.grey,
elevation: 10,
behavior: SnackBarBehavior.fixed,
duration: Duration(seconds: 5),
onVisible: (){
print("onVisible");
},
action: SnackBarAction(
label: "SnackBarAction",
textColor: Colors.red,
disabledTextColor: Colors.green,
onPressed: (){
},
),
);
}
}
SnackBar normal.png
4.2 onVisible、SnackBarAction 事件详解
SnackBar 中有两处回调函数，一个是 onVisible，另一个就是 SnackBarAction.onPressed。
| 事件 | 触发方式 |
|---|---|
| onVisible | SnackBar 完全弹出时调用 |
| SnackBarAction.onPressed | 右侧 Action 点击时触发 |
4.3 颜色样式
我们新增一个样式的 Snack。
class FMSnackBarVC extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(title: Text("SnackBar"),),
body: ListView(
children: [
FMNormalSnackBarBtn(),
FMShapeSnackBarBtn(),
],
),
);
}
}
class FMShapeSnackBarBtn extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return RaisedButton(
child: Text("Shape SnackBar"),
onPressed: (){
Scaffold.of(context).showSnackBar(_shapeSnackBar());
},
);
}
SnackBar _shapeSnackBar(){
return SnackBar(
content: Text("SnackBar"),
backgroundColor: Colors.lightBlueAccent,
elevation: 10,
behavior: SnackBarBehavior.floating,
duration: Duration(seconds: 15),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
side: BorderSide(
color: Colors.yellow,
width: 2,
),
),
onVisible: (){
print("onVisible");
},
action: SnackBarAction(
label: "SnackBarAction",
textColor: Colors.red,
disabledTextColor: Colors.green,
onPressed: (){
print("SnackBarAction.onPressed");
},
),
);
}
}
Snack Shape.png
4.4 自定义 content 的 SnackBar
上边只是简单的文本消息，这里写一个复杂一点的示例，其实 content 本身就是一个自由的 Widget，不用太过古板。
class FMSnackBarVC extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(title: Text("SnackBar"),),
body: ListView(
children: [
FMNormalSnackBarBtn(),
FMShapeSnackBarBtn(),
FMCustomSnackBarBtn(),
],
),
);
}
}
class FMCustomSnackBarBtn extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return RaisedButton(
child: Text("Custom SnackBar"),
onPressed: (){
Scaffold.of(context).hideCurrentSnackBar();
Scaffold.of(context).showSnackBar(_customSnackBar());
},
);
}
SnackBar _customSnackBar(){
return SnackBar(
content: _content(),
backgroundColor: Colors.lightBlueAccent,
elevation: 10,
behavior: SnackBarBehavior.floating,
duration: Duration(seconds: 15),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
side: BorderSide(
color: Colors.yellow,
width: 2,
),
),
onVisible: (){
print("onVisible");
},
action: SnackBarAction(
label: "SnackBarAction",
textColor: Colors.red,
disabledTextColor: Colors.green,
onPressed: (){
print("SnackBarAction.onPressed");
},
),
);
}
Widget _content(){
return Container(
height: 100,
child: Row(
children: [
Container(
width: 60,
child: Image.network('http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg'),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("我叫路飞"),
Text("是要成为海贼王的男人"),
],
),
],
),
);
}
}
SnackBar customer.png
5. SnackBar 进阶
SnackBar 的使用其实非常简单，但是我们来细究一下他的机制。我们连续点击不同弹框，会发现并不会立即弹出下一个，而是按照 duration 展示每一个 SnackBar，如果大量调用，就会一直在最下方等待弹出，这是肯定没法接受的。
（示例中已经做了取消 SnackBar 处理，所以连续点击并没有问题。）
取消弹框有以下两种方式。
Scaffold.of(context).hideCurrentSnackBar();
Scaffold.of(context).removeCurrentSnackBar();
所以建议这么使用，showSnackBar 之前，先隐藏当前 SnackBar。
Widget build(BuildContext context) {
// TODO: implement build
return RaisedButton(
child: Text("Custom SnackBar"),
onPressed: (){
Scaffold.of(context).hideCurrentSnackBar();
// Scaffold.of(context).removeCurrentSnackBar();
Scaffold.of(context).showSnackBar(_normalSnackBar());
},
);
}
6. 技术小结
SnackBar 是一个很简单的控件，多加练习吧。