如何在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
相关产品推荐
相关产品推荐

