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

我们在上一章回中介绍了"蓝牙综合示例八：闭环验证"相关的内容，本章回中将介绍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),
  ),
  );
}

上面的示例代码演示了SnackBar组件的详细用法，我们在关键的位置上添加了注释，以方便大家理解代码。

这个示例就是我们在一章回中示例代码中使用的弹出窗口。我在这里就不演示它的运行结果了，建议大家自己动手去实践。

4. 内容总结

最后，我们对本章回的内容做一个全面的总结：

• 我们可以通过behavior和width属性一起控制SnackBar显示窗口的大小；
• 我们可以通过margin属性控制SnackBar显示窗口的外边距；
• 我们可以通过shap属性控制SnackBar显示窗口的形状；
• 我们可以通过duration属性控制SnackBar窗口的显示时间；
• 我们可以通过actionOverflowThreshold属性控制SnackBar显示窗口的宽高比；

看官们，与"SnackBar使用细节"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!