Flutter WebView右滑手势实现网页内回退而非路由返回问题

你遇到的问题本质是系统/路由默认的左滑返回手势优先触发了Navigator.pop，没有给到WebView处理手势的机会，可以按以下优先级选择方案实现需求：

方案1：拦截返回事件（优先推荐，适配绝大多数场景） #

该方案可同时适配侧滑返回手势、虚拟/实体返回键点击、AppBar返回按钮点击的所有返回场景：

1. 你需要持有WebViewController实例，用于判断网页回退状态、执行网页回退操作
2. 使用WillPopScope包裹WebView页面的Scaffold，重写onWillPop回调拦截返回逻辑

代码示例：

import 'package:webview_flutter/webview_flutter.dart';

class WebshopPage extends StatefulWidget {
  final WebshopArguments arguments;
  const WebshopPage({super.key, required this.arguments});

  @override
  State<WebshopPage> createState() => _WebshopPageState();
}

class _WebshopPageState extends State<WebshopPage> {
  late final WebViewController _webViewController;

  @override
  void initState() {
    super.initState();
    // 初始化WebViewController
    _webViewController = WebViewController()
      ..loadRequest(Uri.parse(widget.arguments.initialUrl));
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        // 检测当前网页是否可回退
        if (await _webViewController.canGoBack()) {
          // 执行网页内回退
          _webViewController.goBack();
          // 阻止路由弹出，避免回到登录页
          return false;
        }
        // 网页无历史可回退，允许路由弹出回到登录页
        return true;
      },
      child: Scaffold(
        appBar: AppBar(title: const Text("商城")),
        body: WebViewWidget(controller: _webViewController),
      ),
    );
  }
}

方案2：自定义滑动手势（仅用于方案1不生效的特殊机型） #

如果部分机型的侧滑手势没有触发WillPopScope回调，可以禁用路由默认的滑动返回，自己监听手势处理回退逻辑：

第一步：修改路由定义，禁用默认滑动返回 #

如果你使用原生路由，在onGenerateRoute中定义路由时改用PageRouteBuilder：

onGenerateRoute: (settings) {
  if (settings.name == webshopRoute) {
    final args = settings.arguments as WebshopArguments;
    return PageRouteBuilder(
      pageBuilder: (context, animation, secondaryAnimation) => WebshopPage(arguments: args),
      // 保留默认的页面转场动画
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        final tween = Tween(begin: const Offset(1.0, 0.0), end: Offset.zero)
            .chain(CurveTween(curve: Curves.ease));
        return SlideTransition(
          position: animation.drive(tween),
          child: child,
        );
      },
    );
  }
  // 其他路由逻辑
}

如果你使用go_router等路由框架，将对应路由页面的allowSnapshotting属性设为false即可禁用滑动返回。

第二步：在WebView页面添加手势监听 #

@override
Widget build(BuildContext context) {
  return GestureDetector(
    // 监听水平滑动事件
    onHorizontalDragUpdate: (details) async {
      // 判断为从右向左滑动，滑动距离阈值可自行调整
      if (details.delta.dx < -20) {
        if (await _webViewController.canGoBack()) {
          _webViewController.goBack();
        } else if (context.mounted) {
          Navigator.pop(context);
        }
      }
    },
    // 保留WillPopScope逻辑，兼容其他返回操作
    child: WillPopScope(
      onWillPop: () async {
        if (await _webViewController.canGoBack()) {
          _webViewController.goBack();
          return false;
        }
        return true;
      },
      child: Scaffold(
        appBar: AppBar(title: const Text("商城")),
        body: WebViewWidget(controller: _webViewController),
      ),
    ),
  );
}

补充说明 #

• 以上代码基于官方webview_flutter包实现，如果你使用第三方WebView组件，替换对应的canGoBack、goBack方法即可。
• 如果需要限制仅在屏幕右侧边缘滑动触发回退，可以在onHorizontalDragUpdate中增加滑动起始位置的判断，仅处理x坐标接近屏幕右侧的滑动事件。

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