Flutter：如何在PopScope的onPopInvokedWithResult中处理WebView返回键

你的环境版本：

• Flutter：3.24.4
• Dart：3.5.4

从WillPopScope迁移到PopScope后，核心思路是先拦截系统返回事件，优先让WebView处理页面返回，当WebView无法返回时再关闭当前路由，具体实现代码如下：

class WebViewPage extends StatefulWidget {
  const WebViewPage({super.key});

  @override
  State<WebViewPage> createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  late final WebViewController webViewController;

  @override
  void initState() {
    super.initState();
    // 初始化WebViewController并加载目标页面
    webViewController = WebViewController()
      ..loadRequest(Uri.parse("https://example.com"));
  }

  @override
  Widget build(BuildContext context) {
    return PopScope(
      // 设置为false，拦截系统默认返回行为
      canPop: false,
      onPopInvokedWithResult: (bool didPop, Object? result) async {
        // 判断WebView是否有历史页面可返回
        if (await webViewController.canGoBack()) {
          // WebView可返回，执行页面后退
          webViewController.goBack();
        } else {
          // WebView无历史页面，手动关闭当前路由
          if (!mounted) return;
          Navigator.of(context).pop(result);
        }
      },
      child: Scaffold(
        body: WebViewWidget(controller: webViewController),
      ),
    );
  }
}

关键逻辑说明 #

1. canPop: false：告诉Flutter框架不要自动处理返回事件，将控制权交给onPopInvokedWithResult回调
2. WebView返回判断：通过webViewController.canGoBack()异步判断是否存在历史页面
3. 路由控制：
   • 若WebView可返回，调用webViewController.goBack()实现页面后退，不关闭当前路由
   • 若WebView不可返回，调用Navigator.of(context).pop(result)手动关闭当前页面，恢复系统默认返回行为

注意事项 #

• 确保webViewController已完成初始化，避免调用方法时出现空指针异常
• 调用Navigator.pop前需判断mounted，防止页面已销毁时触发错误操作

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