第三十九回：Snackbar Widget

最新推荐文章于 2023-09-19 07:00:00 发布

原创最新推荐文章于 2023-09-19 07:00:00 发布 · 836 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #snackbar #toast #tooltip

一起Talk Flutter吧专栏收录该内容

961 篇文章

订阅专栏

文章介绍了Flutter中的SnackbarWidget，它是一种从屏幕底部弹出、自动消失的短暂提示窗口，类似于Android的Toast。文中列举了常用属性如content、shape、duration和action，并提供了示例代码展示如何创建和使用Snackbar，包括配合showSnackBar()方法显示SnackBar。

我们在上一章回中介绍了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
           },
        ),
      ));
    },
  );
}