我们在上一章回中介绍了"蓝牙综合示例八:闭环验证"相关的内容,本章回中将介绍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使用细节"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!