如何讓捏縮放在 webview_flutter 插件上工作

Question

我試圖讓捏縮放在 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 版。

感謝任何使此功能正常工作的幫助或提示。 謝謝你。

Answer 1

在 iOS 上默認啟用捏合縮放，

按照此拉取請求並修改FlutterWebView.java以在 android 上啟用它：

鏈接在這里

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

*和‘羅文輝’一樣。

Answer 3

我改用了 flutter_inappwebview 插件。 默認情況下，使用此插件flutter_inappwebview可以放大和縮小

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

Answer 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.....'),
        ),
      ),
    ),
  },
);