如何在webview_flutter插件上启用双指缩放

Question

我正在尝试在webview_flutter插件中实现Pinch Zoom（双指缩放）功能。这是一个简单的测试应用程序，我参考了这篇指南https://blog.geekyants.com/webviews-in-flutter-87194714ce3d。

我添加了以下gesturerecognizer代码：

  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())), ))
        ],
      ));
  }

但它不支持任何捏合缩放功能。

我正在测试两个不同的Android设备，一个运行Android 8.0操作系统，另一个运行Android 7.0操作系统。我正在使用最新的Flutter Beta版本。

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

- hoichong

Answer 1

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);

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

- Bruno Yuzo

Answer 2

我改用了flutter_inappwebview插件。使用该插件时，双指捏合缩放功能默认可用 flutter_inappwebview

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

- Mussadiq Tariq

Answer 3

iOS默认启用了捏合缩放功能，

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

链接在此

- Wenhui Luo

---

你对iOS缩放功能确定吗？我刚在一个iOS设备上尝试了一下，捏合缩放没有起作用。 - kakyo

@kakyo，你能提供更多的上下文吗？是物理的iOS设备还是模拟器？使用了哪个插件 - webview_flutter还是flutter_webview_plugin？测试了哪些网站页面？等等。 - Wenhui Luo

我使用的是iPhone6s，运行iOS 13，并使用了webview_flutter。这是一个位于我的应用程序资产文件夹中的本地HTML文件。 - kakyo

@kakyo 我猜你本地的HTML不支持捏合缩放。 - Wenhui Luo

我刚刚用webview_flutter示例的最新GitHub副本进行了测试，尝试打开一个网站，但在iOS上仍然无法进行捏合操作。通过一个快速的Electron测试应用程序，我的HTML文件可以正常进行缩放。 - kakyo

Answer 4

您可以像这样使用{{link1：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.....'),
        ),
      ),
    ),
  },
);

- User 6683331