Flutter中WebView同时实现滚动与缩放的问题求助

你的问题出在仅注册了缩放手势识别器，导致滚动手势被拦截。WebView需要同时接收缩放和滚动的手势事件，才能让两个功能正常工作。

关键修改点 #

1. 在gestureRecognizers集合中，除了ScaleGestureRecognizer，还要添加垂直和水平滚动的手势识别器，确保WebView能同时响应两种手势。
2. 修正StatefulWidget构造函数的参数错误（原代码中@required widget.title是语法错误，应改为@required this.title）。

修改后的完整代码 #

import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import '../../widgets/headers/custom_app_bar.dart';

class InfoScreen extends StatefulWidget {
  final String url;
  final String title;

  InfoScreen({Key key, @required this.title, @required this.url})
      : super(key: key);

  @override
  State<StatefulWidget> createState() => _InfoScreenState();
}

class _InfoScreenState extends State<InfoScreen> {
  bool isLoading = true;
  final _key = UniqueKey();
  WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomAppBar(title: widget.title),
      body: Stack(
        children: <Widget>[
          WebView(
            key: _key,
            initialUrl: widget.url,
            javascriptMode: JavascriptMode.unrestricted,
            onWebViewCreated: (WebViewController webViewController) {
              _controller = webViewController;
            },
            onPageFinished: (finish) {
              setState(() {
                isLoading = false;
              });
            },
            gestureRecognizers: Set()
              ..add(Factory<ScaleGestureRecognizer>(
                () => ScaleGestureRecognizer(),
              ))
              ..add(Factory<VerticalDragGestureRecognizer>(
                () => VerticalDragGestureRecognizer(),
              ))
              ..add(Factory<HorizontalDragGestureRecognizer>(
                () => HorizontalDragGestureRecognizer(),
              )),
          ),
          isLoading
              ? const Center(
                  child: CircularProgressIndicator(),
                )
              : const SizedBox.shrink(),
        ],
      ),
    );
  }
}

说明 #

• 同时添加三种手势识别器后，WebView可以正常处理缩放和滚动操作，无需额外用SingleChildScrollView或InteractiveViewer包裹（这两个组件会和WebView的内置手势冲突）。
• 修正了构造函数的参数错误，避免编译报错。

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