Flutter SnackBar 提示信息

最新推荐文章于 2025-10-14 11:28:16 发布

原创最新推荐文章于 2025-10-14 11:28:16 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter SnackBar 提示信息 #Flutter 提示信息 #Flutter Toast

Flutter 基础专栏收录该内容

73 篇文章

订阅专栏

本文详细介绍Flutter中的SnackBar控件，包括其基本用法、参数配置、显示方式及如何处理上下文问题。通过代码示例，展示如何自定义SnackBar的样式、添加按钮及设置动画效果。

SnackBar是用户操作后，显示提示信息的一个控件，类似Toast，会自动隐藏。它还可以添加操作按钮，等等。SnackBar是通过Scaffold的showSnackBar方法来显示的。所以要显示一个SnackBar,要先拿到Scaffold。

当BuildContext在Scaffold之前时，调用Scaffold.of(context)会报错。这时可以通过Builder Widget来解决

参数详解

属性	说明
content	内容
backgroundColor	背景颜色
elevation	阴影高度
shape	形状
behavior	位置 SnackBarBehavior.fixed // 固定在底部 behavior:SnackBarBehavior.floating,//显示在[底部导航栏]上方
action	动作（通常放按钮）
duration	停留时间，如一秒：Duration(seconds: 1),
animation	显示/隐藏动画

代码示例

//定义一个SnackBar
final snackBar = new SnackBar(content: new Text('这是一个SnackBar!'));

//显示SnackBar
Scaffold.of(context).showSnackBar(snackBar);

Builder 用法

Builder(builder: (BuildContext context) {
  return Center(
    child: InkWell(
      onTap: () {
        //定义
        final mySnackBar = SnackBar(
          content: Text('我是SnackBar'),
          backgroundColor: Colors.black26,
          duration: Duration(seconds: 1),
          behavior:SnackBarBehavior.floating,
          action: SnackBarAction(
            label: '我是scackbar按钮', 
            onPressed: () {
              print('点击了snackbar按钮');
            }
          ),
        );
        //显示
        Scaffold.of(context).showSnackBar(mySnackBar);
      },
      child: Padding(padding: EdgeInsets.all(10),child: Text('点 我'),),
    ),
  );
}),

效果图