Flutter中WebView点击返回按钮退出而非页面回退的问题解决

要实现点击设备返回按钮时优先在WebView内回退上一页，而非直接退出页面，需要拦截返回按钮事件并结合WebView的历史记录判断，具体修改如下：

修改后的完整代码 #

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

// 重命名类名避免与webview_flutter库组件命名冲突
class WebViewPage extends StatefulWidget {
  const WebViewPage({super.key});

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

class _WebViewPageState extends State<WebViewPage> {
  final controller = WebViewController()
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    ..loadRequest(Uri.parse("https://youtube.com/"));

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: WillPopScope(
        // 拦截设备返回按钮事件
        onWillPop: () async {
          // 判断WebView是否存在可回退的历史页面
          if (await controller.canGoBack()) {
            // 执行WebView内页面回退
            controller.goBack();
            // 返回false阻止当前页面退出
            return false;
          } else {
            // 无回退页面时，返回true允许退出当前页面
            return true;
          }
        },
        child: WebViewWidget(
          controller: controller,
        ),
      ),
    );
  }
}

关键说明 #

• 使用WillPopScope组件包裹WebViewWidget，它可以拦截Android设备的返回按钮事件
• onWillPop为异步回调，通过await controller.canGoBack()判断WebView是否有历史回退页面
• 若存在回退页面，调用controller.goBack()完成WebView内页面回退，并返回false阻止当前页面退出；若无回退页面，则返回true允许退出
• 原类名WebView与webview_flutter库中的组件存在命名冲突风险，因此重命名为WebViewPage

内容的提问来源于stack exchange，提问作者Imesh Madushan-Dev