You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在Flutter GetX Snackbar中实现带操作按钮的功能?

在GetX Snackbar中实现带操作按钮的撤销功能

直接使用GetX的Get.snackbar()方法,通过mainButton参数即可添加对应原生SnackBarAction的操作按钮,以下是和你原有代码等价的实现:

Get.snackbar(
  "", // 可留空以隐藏标题,和原生SnackBar风格对齐
  "Deleted ${item.matchNumber.value}",
  duration: const Duration(seconds: 3),
  mainButton: TextButton(
    onPressed: () {
      // 执行撤销逻辑
      controller.documentsHelper.saveMatchData(item);
      // 手动关闭Snackbar(原生SnackBarAction点击后自动关闭,GetX需手动调用)
      Get.back();
    },
    child: const Text("Undo", style: TextStyle(color: Colors.white)),
  ),
  // 可选:自定义样式匹配原生SnackBar
  backgroundColor: Colors.grey[800],
  colorText: Colors.white,
  snackPosition: SnackPosition.BOTTOM, // 设置显示在底部,和原生一致
);

关键参数对应说明:

  • mainButton:对应原生SnackBar的action参数,接收任意Widget(这里用TextButton实现撤销按钮)
  • duration:和原生一致,控制Snackbar的显示时长
  • snackPosition:可选设置为SnackPosition.BOTTOM,保持和原生SnackBar相同的底部显示位置
  • 点击按钮后调用Get.back()可关闭Snackbar,还原原生操作的体验

内容的提问来源于stack exchange,提问作者Awesomeplayer165

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.10 22:20:46