Flutter：如何在ModalBottomSheet内实现导航并保留外部点击关闭功能？

你遇到的问题是WillPopScope会拦截所有页面pop请求，包括点击ModalBottomSheet外部灰色区域触发的关闭操作。要同时实现两种行为，推荐用Flutter 3.10+新增的BackButtonListener替代WillPopScope——它只会拦截物理返回键的事件，不会影响外部点击关闭的默认逻辑。

具体实现步骤： #

1. 初始化WebViewController并加载目标网页：

final webViewController = WebViewController()
  ..loadRequest(Uri.parse("https://你的目标网址"));

2. 弹出ModalBottomSheet时，用BackButtonListener包裹WebView组件：

showModalBottomSheet(
  context: context,
  isScrollControlled: true, // 可选，让WebView占满更多弹窗空间
  builder: (ctx) {
    return BackButtonListener(
      onBackPressed: () async {
        // 检查WebView是否可以后退
        final canGoBack = await webViewController.canGoBack();
        if (canGoBack) {
          // 可以后退时，让WebView返回上一页，拦截返回事件
          webViewController.goBack();
          return true;
        }
        // 退无可退时，允许关闭弹窗
        return false;
      },
      child: WebViewWidget(controller: webViewController),
    );
  },
);

为什么这样可行？ #

• BackButtonListener只响应物理返回键的触发，点击弹窗外部灰色区域时，ModalBottomSheet的默认关闭逻辑不受干扰。
• 物理返回键触发时，先判断WebView是否有历史页面，有则执行后退，没有则允许关闭弹窗，完全匹配你的需求。

如果你的Flutter版本低于3.10，没法使用BackButtonListener，可以用WillPopScope包裹WebView，同时给ModalBottomSheet的背景区域添加独立的点击关闭逻辑——不过这种方式代码更繁琐，建议优先升级Flutter版本使用BackButtonListener。

内容的提问来源于stack exchange，提问作者Anup Kumar Panwar