Flutter WebView：Android端如何通过滑动或返回键返回上一页？

一、拦截系统返回键实现返回 #

Android设备可直接利用系统返回键触发WebView返回操作，无需额外添加按钮。使用Flutter的PopScope（Flutter 3.12+推荐）或WillPopScope（旧版本）组件拦截返回事件，结合WebViewController判断页面是否可返回：

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

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

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

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

  @override
  void initState() {
    super.initState();
    _controller = WebViewController()
      ..loadRequest(Uri.parse("https://example.com"));
  }

  @override
  Widget build(BuildContext context) {
    return PopScope(
      canPop: false,
      onPopInvoked: (bool didPop) async {
        if (await _controller.canGoBack()) {
          _controller.goBack();
        } else {
          // 无历史页面时退出当前页面
          if (!context.mounted) return;
          Navigator.of(context).pop();
        }
      },
      child: Scaffold(
        body: WebViewWidget(controller: _controller),
      ),
    );
  }
}

二、添加侧滑手势实现返回 #

如果需要类似iOS的侧滑返回效果，可用GestureDetector包裹WebView组件，监听水平滑动手势触发返回：

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

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

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

class _WebViewPageState extends State<WebViewPage> {
  late final WebViewController _controller;
  final _gestureKey = GlobalKey();

  @override
  void initState() {
    super.initState();
    _controller = WebViewController()
      ..loadRequest(Uri.parse("https://example.com"));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        key: _gestureKey,
        onHorizontalDragEnd: (details) {
          // 从左侧向右滑动时触发返回
          if (details.primaryVelocity! > 200) {
            _controller.canGoBack().then((canGo) {
              if (canGo) _controller.goBack();
            });
          }
        },
        // 允许WebView接收自身手势
        behavior: HitTestBehavior.translucent,
        child: WebViewWidget(controller: _controller),
      ),
    );
  }
}

注意事项 #

• 确保使用最新版的webview_flutter包，避免API兼容问题
• 侧滑手势的触发阈值（示例中的200）可根据需求调整，优化用户体验

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