Flutter：如何避免同时显示两个模态底部弹窗？

方法一：利用Navigator手动关闭现有弹窗 #

showModalBottomSheet 本质是通过 Navigator 栈管理的，你可以在每次触发弹窗前，先尝试关闭已存在的弹窗，再打开新的：

// 流监听器中的处理逻辑
stream.listen((data) async {
  // 先尝试关闭当前可能存在的弹窗
  if (Navigator.canPop(context)) {
    Navigator.pop(context);
  }
  // 打开新的弹窗
  await showModalBottomSheet(
    context: context,
    builder: (context) => YourBottomSheetContent(data: data),
  );
});

这种方式能确保始终只显示最新的弹窗，旧弹窗会被自动关闭替换。

方法二：给流事件添加防抖处理 #

如果两次流事件是短时间内连续触发的，可通过防抖合并事件，只响应最后一次触发，从根源避免重复弹窗。可以借助 rxdart 的 debounceTime 操作符，或者自己实现简单防抖逻辑：

// 用rxdart的防抖示例
stream.debounceTime(Duration(milliseconds: 300)).listen((data) {
  showModalBottomSheet(
    context: context,
    builder: (context) => YourBottomSheetContent(data: data),
  );
});

调整防抖时长，就能让短时间内的连续流事件合并成一次，只弹出一个弹窗。

方法三：全局管理弹窗状态 #

封装一个全局弹窗管理类，跟踪当前是否有弹窗正在显示，避免重复调用：

class BottomSheetManager {
  static bool _isSheetShowing = false;

  static Future<void> showSheet(BuildContext context, Widget Function(BuildContext) builder) async {
    if (_isSheetShowing) return;
    _isSheetShowing = true;
    await showModalBottomSheet(
      context: context,
      builder: builder,
    ).whenComplete(() {
      _isSheetShowing = false;
    });
  }
}

// 流监听器中调用
stream.listen((data) {
  BottomSheetManager.showSheet(context, (context) => YourBottomSheetContent(data: data));
});

这种方式会直接忽略后续触发请求，直到当前弹窗关闭。如果需要替换旧弹窗，也可以在showSheet里结合方法一的逻辑，先关闭现有弹窗再打开新的。

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