Flutter InAppWebView实现返回键在首页时关闭应用

问题根源 #

你的代码依赖_canGoBack变量判断是否可回退，但这个变量如果没有实时同步WebView的实际导航状态，就会导致判断失效；另外直接用缓存值可能和WebView当前状态不一致，这是WillPopScope未生效的核心原因。

解决方案 #

1. 实时监听WebView导航状态，更新可回退标记 #

借助WebView的导航回调（以webview_flutter插件为例），在页面跳转或加载完成后，实时获取WebView的可回退状态并更新变量：

late WebViewController _webViewController;
bool _canGoBack = false;

// 初始化WebView时配置导航回调
WebView(
  controller: _webViewController,
  navigationDelegate: NavigationDelegate(
    onPageFinished: (url) async {
      // 页面加载完成后，更新可回退状态
      _canGoBack = await _webViewController.canGoBack();
      setState(() {});
    },
    onNavigationRequest: (request) async {
      // 发起导航请求后，同步更新状态
      _canGoBack = await _webViewController.canGoBack();
      setState(() {});
      return NavigationDecision.navigate;
    },
  ),
)

2. 修正WillPopScope逻辑，实时校验状态 #

不要依赖缓存的_canGoBack，而是在onWillPop回调里实时调用WebViewController的canGoBack()，确保判断的是WebView当前的真实状态：

WillPopScope(
  onWillPop: () async {
    // 实时获取WebView是否可回退
    bool canGoBack = await _webViewController.canGoBack();
    if (canGoBack) {
      _webViewController.goBack();
      // 返回false，阻止系统默认的返回关闭行为
      return false;
    }
    // 返回true，允许系统关闭应用
    return true;
  },
  child: Scaffold(
    body: WebView(/* 你的WebView配置 */),
  ),
)

3. 额外注意事项 #

• 确保WillPopScope包裹的是页面根Widget（如Scaffold），不要仅包裹WebView，否则返回事件可能被WebView直接拦截。
• 若使用其他WebView插件（如flutter_inappwebview），获取可回退状态的方法逻辑类似，仅回调名称或API细节需参考对应插件文档调整。

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