• 第三十九回:Snackbar Widget



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

    概念介绍

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

    使用方法

    和其它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
               },
            ),
          ));
        },
      );
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

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

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

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

  • 相关阅读:
    【工具类】比较优雅的在工具类中,用泛型方法获取枚举的值
    mac vscode 使用 clangd
    linux debian8.2系统安装mysql
    11.3 校招 实习 内推 面经
    毕业一周年,工作一周年,感想理解篇
    我用EasyExcel优化了公司的导出(附踩坑记录)
    蓝桥杯练习题七 - 第几天(c++)
    pthread使用
    大道至简的架构设计思想之:封装(C系架构设计法,sishuok)
    LVGL 日历组件
  • 原文地址:https://blog.csdn.net/talk_8/article/details/130895349