第二百一十四回 SnackBar使用细节

原创已于 2024-01-13 20:13:40 修改 · 1.2k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #移动开发Flutter

于 2023-12-18 23:55:08 首次发布

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

961 篇文章

订阅专栏

本文介绍了Flutter中SnackBar组件的使用细节，包括修改窗口大小、形状、显示时间和外边距，以及如何通过代码示例实现这些功能。

文章目录

1. 概念介绍
2. 细节问题
3. 示例代码
4. 内容总结

我们在上一章回中介绍了"蓝牙综合示例八：闭环验证"相关的内容，本章回中将介绍SnackBar使用细节.闲话休提，让我们一起Talk Flutter吧。

在这里插入图片描述

1. 概念介绍

在Flutter中SnackBar经常用来弹出提示窗口，比如我们在上一章回中就使用它来弹出闭环验证的结果。它可以用来代替Android原生开发中的Toast.我们在前面章回中介绍过该组件的基本使用方法，本章回中将在此基础上介绍一些细节知识。

2. 细节问题

2.1 修改窗口大小

我们可以使用width属性来修改SnackBar显示窗口的大小，不过需要给behavior属性设定为floating后才能给width属性赋值，也就是说这两个属性同时使用才可以修改窗口的大小。

除此之处还可以通过调整外边距来修改窗口的大小。我们在这里说外边距表示它的窗口与屏幕之间的边距，通过margin属性可以控制外边距的大小。注意：该属性不能和width属性一起使用，否则有编译错误.

2.2 修改窗口形状

我们可以使用shap属性修改SnackBar显示窗口的形状，默认是圆角矩形，不过圆角比较小，我们可以在形状中调整圆角的大小。还有一个名叫actionOverflowThreshold的属性，它可以控制显示窗口的宽高比。

2.3 修改显示时间

我们可以使用duration属性修改SnackBar窗口的显示时间。与Android原生开发中Toast的显示时间相比，这个时间非常灵活。原生Toast只有三种固定的显示时间，而SnackBar的显示时间完全由Duration组件控制，可以是毫秒级，也可以是秒级，而且时长的长短也是完全自由。

3. 示例代码

static void showSnackBar(BuildContext context,bool flag) {
  ///snackBar显示内容的时间，单位是s
  int snackBarShowingTime = 2;
  String message = "";

  if(flag) {
    message = S.current.snb_successful;
  } else {
    message = S.current.snb_failed;
  }

  //通过showSnackBar方法显示SnackBar
  ScaffoldMessenger.of(context).showSnackBar(SnackBar(
    content: Text(message,style: const TextStyle(color: Colors.white),textAlign: TextAlign.center,),
    backgroundColor: Colors.black87,
    ///behavior设定为floating后才能给width赋值
    behavior: SnackBarBehavior.floating,
    // width: MediaQuery.of(context).size.width-32,
    ///控制snackBar与屏幕之间的距离，相当于外边距，不能与width同时使用
    margin: const EdgeInsets.only(left:16,right:16,bottom:90),
    ///控制snackBar中内容与边框之间的距离，相当于内边距
    // padding: EdgeInsets.only(top: 300),
    ///控制snackBar的宽高比，默认值是0.25
    actionOverflowThreshold: 0.2,
    elevation: 29,
    //修改形状，默认为矩形
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(20),
      side: const BorderSide(),
    ),
    //显示时间
    duration: Duration(seconds: snackBarShowingTime),
  ),
  );
}