【问题标题】:WebView in ListView without assigning its dimensionsListView 中的 WebView 未分配其尺寸
【发布时间】:2019-03-21 06:00:51
【问题描述】:

是否有可能将 WebView (webview_flutter) 放入 ListView 而不指定其尺寸但自动采用其高度。我找到的唯一可行的解​​决方案是通过分配 WebView 的高度将 WebView 放入容器中,但我不想分配任何高度,我只是希望它根据其内容占据高度..

为此,我尝试了很多解决方案,包括 Expanded,但遇到了关于无限高度的错误。有什么解决办法吗?

【问题讨论】:

  • 你能再解释一下吗?也许有图片

标签: listview webview flutter


【解决方案1】:

到目前为止,您还不能像我期望的那样...但是您可以在 webview 小部件中包含滚动

导入这些库:

导入'package:flutter/gestures.dart';

导入'package:flutter/foundation.dart';

将此行添加到您的 webview 小部件:

gestureRecognizers: Set()..add(Factory<VerticalDragGestureRecognizer>(()=>VerticalDragGestureRecognizer())),

你就完成了:)

编辑 flutter_widget_from_html 插件现在支持 webview 和 iframe,您可以在 web_view 插件中使用它,而无需使用高度

【讨论】:

    【解决方案2】:

    很抱歉来晚了,但现在它工作正常。

    我将 WebView 包装到一个 SizedBox 中并分配它的高度,如下所示:

                  _webViewController
                      .evaluateJavascript("document.body.clientHeight")
                      .then((height) {
                    print("Height of Page is: $height}");
                    setState(() {
                          sizedBoxHeight = double.parse(height);
                        });
                  });
    

    对于更高级的解决方案,我们可以像这样使用 JavascriptChannels:

                javascriptChannels: Set.from([
                  JavascriptChannel(
                      name: 'RenderedWebViewHeight',
                      onMessageReceived: (JavascriptMessage message) {
                          setState(() {
                            sizedBoxHeight = double.parse(message.message);
                          });
    
                ]),
    

    在 JavaScript 中,我们可以做这样的事情。

    onload="RenderedWebViewHeight.postMessage(document.body.clientHeight);"
    

    现在我们可以看到它正在动态计算 WebView 的高度,它被包装在一个 SizedBox 中,高度为 WebView,因此我们可以将它放入 ListView 中。

    更详细的解决方法可以看webview_flutter_plus

    编辑:

     document.documentElement.scrollHeight
    

    是最准确的做事方式。这适用于身体边缘和身体内部将其向下推的东西的边缘。 更多信息How to get height of entire document with JavaScript

    【讨论】:

    • 链接好像坏了
    • 我已经调整了那个断开的链接。
    • 链接再次断开!这看起来正是我所需要的,而且有点超出我目前的理解能力。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-06-24
    • 2012-06-10
    • 1970-01-01
    相关资源
    最近更新 更多