用户点击GetX snackbar后能否修改其初始显示时长?
核心结论
GetX 自带的 GetSnackBar 弹出后没有提供直接修改预设显示时长的内置API,没法对已经在展示的snackbar动态调整存续时间,要实现点击后额外多显示x秒的需求,不用硬改源码,用关闭重开的方案就能零感知实现。
具体实现思路
不用纠结修改现有snackbar实例,利用GetX可以快速关闭当前snackbar的能力,点击触发时按以下逻辑处理即可:
- 先计算当前snackbar已经展示了多久,算出原本还剩多少显示时间
- 无动画关闭当前正在展示的snackbar
- 立刻弹出一个和原有样式、内容完全一致的新snackbar,把显示时长设置为「剩余原时长 + 需要额外增加的x秒」
整个过程用户看不到关闭重开的断层,完全感知不到组件被替换,效果和直接延长时长没有区别。
可直接参考以下实现代码:
// 可根据自己的业务需求调整初始时长、每次点击额外延长的时长 const initShowDuration = Duration(seconds: 3); const extraShowDuration = Duration(seconds: 5); void showClickExtendSnack() { final baseSnack = GetSnackBar( title: "操作提示", message: "点击本条提示可额外多显示5秒", duration: initShowDuration, onTap: (activeSnack) async { // 计算当前snackbar剩余的原本显示时长 final alreadyShowTime = DateTime.now().difference(activeSnack.activeTime!); final remainTime = initShowDuration - alreadyShowTime; // 无动画关闭当前snackbar,避免视觉跳变 await Get.closeCurrentSnackbar(duration: Duration.zero); // 弹出新snackbar,样式和原snackbar完全一致,时长叠加延长时间 final newSnack = GetSnackBar( title: activeSnack.title, message: activeSnack.message, icon: activeSnack.icon, backgroundColor: activeSnack.backgroundColor, margin: activeSnack.margin, borderRadius: activeSnack.borderRadius, // 有其他自定义属性原样复制即可,保证前后样式统一 duration: remainTime + extraShowDuration, onTap: (tapSnack) async { // 支持多次点击反复续时,逻辑和第一次点击完全一致 final showed = DateTime.now().difference(tapSnack.activeTime!); final currentRemain = (remainTime + extraShowDuration) - showed; await Get.closeCurrentSnackbar(duration: Duration.zero); Get.showSnackbar(GetSnackBar( title: tapSnack.title, message: tapSnack.message, icon: tapSnack.icon, backgroundColor: tapSnack.backgroundColor, margin: tapSnack.margin, borderRadius: tapSnack.borderRadius, duration: currentRemain + extraShowDuration, )); }, ); Get.showSnackbar(newSnack); }, ); Get.showSnackbar(baseSnack); }
踩坑提醒
- 调用
Get.closeCurrentSnackbar()时必须传duration: Duration.zero,把关闭动画时长设为0,不然会有明显的闪烁、退出再进入的动效,出现穿帮 - 如果给snackbar自定义了按钮、进度条、自定义动画等特殊配置,新建snackbar的时候要把这些属性全量复制过去,避免前后样式不一致
- 需要支持多次点击续时的话,可以把续时逻辑抽成独立公共方法递归调用,不用重复写冗余代码
内容的提问来源于stack exchange,提问作者mar2dev
相关产品推荐
相关产品推荐

