第三十九回：Snackbar Widget

我们在上一章回中介绍了Tooltip Widget相关的内容,本章回中将介绍 Snackbar Widget.闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在这里说的Snackbar也是一种弹出窗口，它会从屏幕的底部弹出来，显示一段时间后自动消失,它经常用来在在屏幕底部显示短暂的提示信息。如果在场的看官们熟悉Android编程的话，就会发现Snackbar和Toast十分相似。

使用方法

和其它Widget类似，我们可以通过Snackbar的属性来操作它，下面是一些常用的属性：

• content属性:用来控制窗口中显示的内容，它是构造方法中的必选参数；
• shape属性：用来控制窗口的形状，默认为矩形;
• duration属性：用来控制窗口的显示时间；
• action属性: 用来在窗口中添加按钮并且给按钮提供动作；

此外，Snackbar不能单独使用，需要配合showSnackBar()方法一起使用，它们的详细用法可以参考示例代码。

示例代码

_showSnackBar(BuildContext context) {
  return ElevatedButton(
    child: const Text("Show SnackBar"),
    onPressed: () {
      //通过showSnackBar方法显示SnackBar
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: const Text("This is SnackBar"),
        backgroundColor: Colors.amberAccent,
        //修改形状，默认为矩形
        shape:const CircleBorder(
          side: BorderSide(),
        ),
        //显示时间
        duration:const Duration(seconds: 3),
        action: SnackBarAction(
          textColor: Colors.black12,
          label: "SnackBar Action",
          onPressed: () {//do nothing
           },
        ),
      ));
    },
  );
}

我们在上面的代码中的关键位置添加了注释，这样方便大家理解代码。另外特别关注一下showSnackBar()方法的使用方法。

我们把Snackbar封装到了按钮的点击事件中，当点击按钮时就会弹出窗口。编译并且运行上面的程序时就会在屏幕上看到一个按钮，点击该按钮后在屏幕底部弹出一个圆形窗口，3秒后该窗口自动消失，这个窗口就是本章回中的主角：SnackBar。我在这里就不演示程序的运行结果了，建议大家自己动手去实践。

看官们，与Snackbar Widget相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!