Flutter WebView中如何通过手机物理返回键实现页面回退？

当然可以啦！要实现手机物理返回键控制WebView回退，我们可以用Flutter提供的WillPopScope组件来拦截物理返回事件，结合WebViewController的方法来处理。下面是针对你现有代码的修改方案：

完整修改后的代码 #

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

final uri = Uri.parse('https://google.com');

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    // 初始化WebViewController
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setNavigationDelegate(NavigationDelegate(
        onPageFinished: (String url) {
          print(url);
        },
      ))
      ..loadRequest(uri);
  }

  @override
  Widget build(BuildContext context) {
    // 使用WillPopScope拦截物理返回键事件
    return WillPopScope(
      onWillPop: () async {
        // 判断WebView是否存在可回退的历史页面
        if (await controller.canGoBack()) {
          // 让WebView回退到上一页
          controller.goBack();
          // 返回false，阻止系统默认的返回操作（不退出当前页面）
          return false;
        } else {
          // WebView没有可回退页面时，执行系统默认返回（退出当前页面）
          return true;
        }
      },
      child: Scaffold(
        floatingActionButton: Container(
          height: 40.0,
          width: 40.0,
          child: FittedBox(
            child: FloatingActionButton(
              child: const Icon(Icons.arrow_back),
              onPressed: () async {
                // 给浮动按钮也加上判断逻辑，避免无页面可回退时出错
                if (await controller.canGoBack()) {
                  controller.goBack();
                }
              },
              backgroundColor: Colors.grey.shade200,
            ),
          ),
        ),
        body: SafeArea(
          child: WebViewWidget(
            controller: controller,
          ),
        ),
      ),
    );
  }
}

关键部分说明 #

• WillPopScope组件：这是实现物理返回键拦截的核心，它的onWillPop回调会在用户点击物理返回键时触发，我们可以在里面自定义处理逻辑。
• controller.canGoBack()：异步方法，用来检查WebView是否有可回退的历史页面，避免调用goBack()时出现错误。
• 返回值控制：当WebView可以回退时，我们调用goBack()后返回false，告诉系统不要执行默认的页面退出操作；当没有可回退页面时，返回true，让系统执行默认的返回逻辑。
• 改成StatefulWidget：因为我们需要在initState中初始化WebViewController，并保持它的实例引用，这样才能在后续的回调中正常调用它的方法。

这样修改后，你既可以保留原来的浮动按钮回退功能，也能通过手机物理返回键实现WebView的页面回退啦！

备注：内容来源于stack exchange，提问作者gill