Flutter中通过Cubit事件关闭多个底部Sheet模态框的问题

问题分析 #

你尝试连续调用两次popRoute()仅关闭了最后打开的BottomSheet，大概率是导航栈操作的时机、context匹配问题，或是单次事件触发下连续pop未正确作用到两个栈条目导致的。

解决方案 #

方案1：使用popUntil直接回退到主页面路由

这种方式无需关心当前模态框数量，直接将导航栈回退到主页面（或指定路由），一次性关闭所有弹窗，是最简便可靠的方法：

// 在主页面的Cubit事件监听逻辑中
Navigator.of(context).popUntil((route) => route.isFirst);
// 若主页面不是路由栈首个页面，可通过路由名称精准匹配：
// Navigator.of(context).popUntil(ModalRoute.withName('/your-main-route'));
context.read<BillCubit>().fetch();

方案2：跟踪每个BottomSheet的关闭回调

如果需要精准控制关闭顺序，可在打开每个BottomSheet时保存对应的关闭函数，后续统一调用：

// 主页面中定义关闭回调变量
VoidCallback? closeFirstSheet;
VoidCallback? closeSecondSheet;

// 打开第一个BottomSheet时保存回调
closeFirstSheet = () => Navigator.of(context).pop();
await showModalBottomSheet(
  context: context,
  builder: (_) => FirstBottomSheet(),
);

// 在第一个BottomSheet内打开第二个时保存回调
closeSecondSheet = () => Navigator.of(context).pop();
await showModalBottomSheet(
  context: context,
  builder: (_) => SecondBottomSheet(),
);

// 在Cubit事件监听中依次执行关闭
closeSecondSheet?.call();
closeFirstSheet?.call();
context.read<BillCubit>().fetch();

排查注意点 #

• 确保使用的context是主页面的BuildContext，而非BottomSheet内部的context，否则pop操作只会作用于当前Sheet的局部导航栈。
• 若你使用的是showBottomSheet（非模态的持久化BottomSheet），则不能用pop关闭，需改用Scaffold.of(context).removeCurrentBottomSheet()。

内容的提问来源于stack exchange，提问作者Farhan