0

在flutter中，在使用Webview的时候，有时候想要在它的上方和下方显示内容。

问题 - 1？Webview 需要约束，否则无法显示：您需要将 Webview 包装在具有固定大小的容器下或具有可扩展或类似内容的列下。

问题 - 2？高度可以很容易地获取，但有时 Webview 会加载异步数据，例如嵌入脚本，这会改变页面的样式。在这种情况下，很难知道如何以及何时获取 Webview 高度。

有了这些问题，大多数时候你的 Webview 会显示一个滚动条，当到达 webview 的底部时，用户将无法滚动你的颤动页面。滚动将与 Webview 冲突。

解决这个问题的最佳方法是什么？

4

2 回答 2

3

您将需要在您的 html 周围添加一个额外的内容并使用 javascript 事件处理程序。

我们将对其进行一点自定义，而不是将原始 html 传递给 webview。

final htmlFromApi = await getContent();
final html = Uri.dataFromString('''
                        <html lang="fr">
                           <meta name="viewport" content="width=device-width user-scalable=no zoom=1.1">
                           <style>img {max-width: 100%; height: auto}</style>
                           <body>
                            <div class="container" id="_flutter_target_do_not_delete">$htmlFromApi</div>
                            <script>
                            function outputsize() {
                                if (typeof window.flutter_inappwebview !== "undefined" && typeof window.flutter_inappwebview.callHandler !== "undefined")
                                   window.flutter_inappwebview.callHandler('newHeight', document.getElementById("_flutter_target_do_not_delete").offsetHeight);
                                }
                              new ResizeObserver(outputsize).observe(_flutter_target_do_not_delete)
                            </script>
                          </body>
                        </html>
                      ''', mimeType: "text/html", encoding: Encoding.getByName("utf-8")).toString();

如何使用 Webview ：

/// Define it to 1 else the Webview widget will not start loading.
double height = 1;
///some widgets
Container(
  height: height,
  child: InAppWebView(
    initialOptions: InAppWebViewGroupOptions(
      crossPlatform: InAppWebViewOptions(
        supportZoom: false,
        javaScriptEnabled: true,
        disableHorizontalScroll: true,
        disableVerticalScroll: true,
      ),
    ),
    onWebViewCreated: (InAppWebViewController controller) {
      controller.addJavaScriptHandler(
        handlerName: "newHeight",
        callback: (List<dynamic> arguments) async {
          int? height = arguments.isNotEmpty ? arguments[0] : await controller.getContentHeight();
          if (mounted) setState(() => this.height = height!.toDouble());
        });
    },
    initialUrl: html,
  ),
),
///some widgets

解释 ：

当 div 内容发生变化时，将发送一个具有新大小的事件。Flutter InAppWebView 会监听它并调用回调。我们只需要用当前视图高度更新 WebView 的父容器。就是这样，webview 像一个小部件一样显示在颤动中，没有任何大小问题。

于 2021-03-04T14:36:48.607 回答
0 
      int? contentHeight = await _controller?.getContentHeight();
            double? zoomScale = await _controller?.getZoomScale();
            double htmlHeight = contentHeight!.toDouble() * zoomScale!;
            double htmlHeightFixed =
                double.parse(htmlHeight.toStringAsFixed(2));
            if (htmlHeightFixed == 0.0) {
              return;
            }
            setState(() {
              _htmlHeight = htmlHeightFixed + 0.1;
            });
于 2021-11-09T02:49:13.423 回答