在移动应用程序中,SnackBar 是一个小的界面组件,在用户操作后提供简短的响应。它出现在屏幕底部,当时间到或用户在屏幕上的其他地方交互时会自动消失。
SnackBar 还提供了一个按钮作为执行操作的选项。例如,撤消刚刚执行的操作,或者如果失败则重试您刚刚执行的操作。
SnackBar 构造函数:
const SnackBar(
{Key key,
@required Widget content,
Color backgroundColor,
double elevation,
EdgeInsetsGeometry margin,
EdgeInsetsGeometry padding,
double width,
ShapeBorder shape,
SnackBarBehavior behavior,
SnackBarAction action,
Duration duration: _snackBarDisplayDuration,
Animation<double> animation,
VoidCallback onVisible}
)
Flutter 应用遵循 Material Design 一致性准则,以确保当 SnackBar 出现在屏幕底部时,它不会与其他重要的子小部件(例如 FloatingActionButton)重叠。因此,SnackBar 需要通过 Scaffold 来调用。
让我们看一个简单的例子:
示例代码如下(main.dart) -
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'yiibai.com',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter SnackBar Example'),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {},
),
body: Center(
child: Builder(
builder: (BuildContext ctxOfScaffold) {
return ElevatedButton(
child: Text('Show SnackBar'),
onPressed: () {
this._showSnackBarMsgDeleted(ctxOfScaffold);
}
);
}
)
)
);
}
void _showSnackBarMsgDeleted(BuildContext ctxOfScaffold) {
// Create a SnackBar.
final snackBar = SnackBar(
content: Text('Message is deleted!'),
action: SnackBarAction(
label: 'UNDO',
onPressed: () {
this._showSnackBarMsgRestored(ctxOfScaffold);
},
),
);
// Find the Scaffold in the widget tree
// and use it to show a SnackBar.
Scaffold.of(ctxOfScaffold).showSnackBar(snackBar);
}
void _showSnackBarMsgRestored(BuildContext ctxOfScaffold) {
// Create a SnackBar.
final snackBar = SnackBar(
content: Text('Message is restored!')
);
// Find the Scaffold in the widget tree
// and use it to show a SnackBar.
Scaffold.of(ctxOfScaffold).showSnackBar(snackBar);
}
}
2. content属性
content属性是显示在 SnackBar 上的主要内容,通常是一个 Text 对象。
@required Widget content
3. backgroundColor属性
backgroundColor属性用于配置 SnackBar 的背景颜色。
Color backgroundColor
4. elevation属性
elevation属性是 SnackBar 的 Z 轴坐标,其值影响 SnackBar 的阴影大小。
double elevation
注意:elevation 属性仅适用于浮动 SnackBar(行为:SnackBar Behavior.floating)。
elevation属性示例:
final snackBar = SnackBar(
content: Text('Message is deleted!'),
elevation: 15,
behavior: SnackBarBehavior.floating,
action: SnackBarAction(
label: 'UNDO',
onPressed: () {
},
),
)
运行效果如下 -
5. margin属性
margin 属性用于在 SnackBar 周围创建一个空白空间。但是,此属性仅在行为值为 SnackBarBehavior.floating
且未指定宽度时有效。它的默认值是 EdgeInsets.fromLTRB(15.0, 5.0, 15.0, 10.0)。
EdgeInsetsGeometry margin
6. padding属性
padding 属性用于在 SnackBar 内创建一个空白空间并环绕内容和动作。
EdgeInsetsGeometry padding
7. width属性
width 属性是 SnackBar 的宽度,它仅在行为是 SnackBarBehavior.floating 时才有效。如果指定了宽度,则 SnackBar 将水平放置在中心。
double width
8. shape属性
ShapeBorder shape
9. behavior属性
behavior属性指定 SnackBar 的行为和位置。
SnackBarBehavior behavior
// Enum values:
SnackBarBehavior.fixed
SnackBarBehavior.floating
10. action属性
action属性在 SnackBar 上显示为按钮。用户可以单击它来执行操作。
SnackBarAction action