webview如何填满所有页面？答案

【问题标题】：How a webview can fill all the page?webview如何填满所有页面？
【发布时间】：2014-01-21 14:18:16
【问题描述】：

我正在使用 momentics IDE（本机 sdk）开发一个 blackberry 10 移动应用程序。

我正在尝试在一个 qml 页面中放入一个 webview，它的显示应该带孔父级容器尺寸（宽度和高度），如下面代码中所述。但由于我没有找到的原因，它没有。有人对此有想法吗？

    Page {
        content: Container {
            id: mainEntryContainer
            objectName: "mainEntryContObj"

            layout: StackLayout {
                orientation: LayoutOrientation.TopToBottom
            }

            background: Color.create("#292929")

            FastBarHeader {
                id: headerContainer
                objectName: "headerContObj"
            }

            Container {
                id: choosedOptionContainer
                objectName: "choosedOptionContObj"

                layoutProperties: StackLayoutProperties {
                    spaceQuota: 8
                }

                WebView {
                   id: htmlViewerItem
                   objectName: "htmlViewerItemObj"

                   horizontalAlignment: HorizontalAlignment.Fill
                   verticalAlignment: VerticalAlignment.Fill

                   settings.cookiesEnabled: true
                   settings.javaScriptEnabled: true

                   settings.devicePixelRatio: 1.0
                   settings.viewport: {
                         "initial-scale": 1.0
                    }

                    onLoadingChanged: {
                      if (loadRequest.status == WebLoadStatus.Succeeded) {
                           indicatorProgress.progIndicatorLabelValue = "Load finished."
                           visible = true
                           indicatorProgress.visible = false
                      } else if (loadRequest.status == WebLoadStatus.Failed) {
                           indicatorProgress.progIndicatorLabelValue = "Load failed."
                      }

                     }

                   accessibility.name: "web content"
                }
            }

            FastBarFooter {
            }

        }
    }

【问题讨论】：

您需要空间配额吗？
是的！我需要它将页面分成 3 个部分，并确保没有人会占用另一部分的空间。实际上，它只发生在 webview 时；我试图将其他 qml 组件代替 webview 并且它工作得很好。真奇怪！！！

标签： c++ qt blackberry qml blackberry-10

【解决方案1】：

我相信您需要将 WebView 包装在 ScrollView 中（这允许 webview 在需要时正确滚动）。

我是这样实现的：

ScrollView {
    id: scrollview

    implicitLayoutAnimationsEnabled: false
    scrollViewProperties.minContentScale: 1.0

    WebView {
        id: webview
        preferredHeight: Infinity
        preferredWidth: Infinity

        // viewport setup
        settings.viewport: {
            "width": "device-width",
            "height": "device-height",
            "initial-scale": 1.0
        }
    } // WebView

} // ScrollView

【讨论】：

【解决方案2】：

您可以在父容器中使用 WebViews 的首选大小和高度来制作容器：

attachedObjects: LayoutUpdateHandler {
        onLayoutFrameChanged: {
            <your_webview_id>.preferredWidth = layoutFrame.width;
            <your_webview_id>.preferredHeight = layoutFrame.height;
        }
    }

【讨论】：