如何让 Pinch Zoom 在 webview_flutter 插件上工作

Posted 2023-02-23

【中文标题】如何让 Pinch Zoom 在 webview_flutter 插件上工作

【英文标题】：How to get Pinch Zoom working on webview_flutter plugin

【发布时间】：2019-11-17 07:58:42

【问题描述】：

我正在尝试让 Pinch Zoom 在 webview_flutter 插件/插件中工作。 这是一个简单的测试应用程序，我将本教程作为指南https://blog.geekyants.com/webviews-in-flutter-87194714ce3d。

我在其中添加了这个手势识别器代码。

  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          Expanded(
            child: WebView(
              key: _key,
              javascriptMode: JavascriptMode.unrestricted,
              initialUrl: _url,
              gestureRecognizers: Set()..add(Factory < VerticalDragGestureRecognizer > (
                () => VerticalDragGestureRecognizer()))..add(Factory < ScaleGestureRecognizer > (
                () => ScaleGestureRecognizer())), ))
        ],
      ));
  

但它不启用任何捏缩放功能。

我正在使用 2 台不同的 android 设备进行测试，一台运行 Android OS 8.0，另一台运行 Android OS 7.0。 我正在使用 Flutter 最新的 Beta。

感谢任何帮助或提示让此功能正常工作。 谢谢。

【参考方案1】：

在 ios 上默认启用双指缩放，

按照此拉取请求并修改 FlutterWebView.java 以在 android 上启用它：

link here

【讨论】：

你确定iOS缩放吗？我刚刚在 iOS 设备上尝试过，捏缩放不起作用。

@kakyo 你能提供更多背景信息吗？物理ios设备还是模拟器？哪个插件 - webview_flutter 或 flutter_webview_plugin？测试了哪些网站页面？等

我在 iPhone6s 上运行 iOS 13，webview_flutter。这是我应用的 assets 文件夹中的一个本地 html 文件。

@kakyo 我猜你的本地 html 不支持捏缩放

我刚刚测试了 webview_flutter 示例的最新 github 副本，试图打开一个网站，但在 iOS 上仍然没有任何问题。使用快速 Electron 测试应用程序在我的 html 文件上缩放效果很好。

【参考方案2】：

Flutter 插件 > webview_flutter-2.0.2 > /android/src/main/java/io/flutter/plugins/webviewflutter/FlutterWebView.java

我只是改变这个文件，添加这个代码：

// Allow zoom.
webView.getSettings().setBuiltInZoomControls(true);
// Hide buttons.
webView.getSettings().setDisplayZoomControls(false);

*和“罗文辉”做的一样。

【参考方案3】：

我改用了 flutter_inappwebview 插件。默认情况下，此插件可使用捏合放大和缩小功能flutter_inappwebview

 InAppWebView(
        initialUrlRequest: URLRequest(url: Uri.parse(widget.webUrl)),
        onLoadStart: (controller,uri)
        ,
        onLoadStop : (controller,uri)
        ,
      ),

【参考方案4】：

您可以像这样使用flutter_webview_plugin：

return new MaterialApp(
  title: 'Flutter WebView Demo',
  theme: new ThemeData(
    primarySwatch: Colors.blue,
  ),
  routes: 
    '/': (_) => const MyHomePage(title: 'Flutter WebView Demo'),
    '/widget': (_) => new WebviewScaffold(
      url: selectedUrl,
      appBar: new AppBar(
        title: const Text('Widget webview'),
      ),
      withZoom: true,   // zoom
      withLocalStorage: true,
      hidden: true,
      initialChild: Container(
        color: Colors.redAccent,
        child: const Center(
          child: Text('Waiting.....'),
        ),
      ),
    ),
  ,
);