☰

qml 和 oxyde 中的奇怪错误

tag-icon • tag-icon application-development qml
qml 和 oxyde 中的奇怪错误

我用这个源代码制作了一个应用程序： http://pastebin.com/zMwtusZJ 然而，当我尝试运行该应用程序时，webview 却变黑并且无法加载网页。

以下是崩溃的输出： http://pastebin.com/AjDjadEP

当我使用类似->width:units.gu(160) 之类的内容为 webview 元素定义宽度时，它就可以正常工作。但是，如果可能的话，我更希望它使用父级的完整高度。

以下是修复和改进的源代码：http://pastebin.com/6UyMF9Tb

答案1

我无法重现您的问题，但是当我运行您的示例时，我根本看不到 webview。在我看来，您的定位非常混乱。您有一个包含单个行的列，该行包含另一个列。这真的没有意义。它被错误的缩进所掩盖，因此第一个要点是，在发布代码之前清理代码。这不仅会帮助那些试图帮助您的人，而且您可能会在此过程中发现问题。

您正在通过显式大小和锚定混合定位。例如，您的外列通过 anchor.fill 属性显式和隐式设置了宽度。如果它们不一致，您知道哪一个会获胜吗？我当然不知道。

类似地，您将 WebView 的宽度设置为其父元素 Row 的宽度。但是 Row 必须足够宽才能容纳其所有子元素，因此它必须比 WebView 更宽。QML 如何解决这个问题？我不知道。我发现 Row 和 Column 适合排列多个已知大小的元素，但不适合容纳应该占用剩余空间的元素。如果这是您想要的，请明确执行或通过锚点执行。

下面，我将您的示例代码重写为适合我的形式。我不知道这是您想要的布局，但希望它足够清晰，以便您按照自己认为合适的方式重新排列它。

我选择将 URL 条目和按钮放在一行中，因为它们都是固定大小的。WebView 应该占据剩余的空间，因此我将其顶部锚定到行的底部（留出 1 个 gu 的边距），将其底部锚定到页面的底部。将其宽度设置为页面宽度可确保它完全覆盖整个页面，尽管也可以使用锚点来实现这一点。

import QtQuick 2.0
import Ubuntu.Components 1.1
import com.canonical.Oxide 1.0
import QtQuick.Window 2.0

MainView {
    applicationName: "com.ubuntu.developer.mkamenjak77.bugapp"
    useDeprecatedToolbar: false
    width: Screen.width/2
    height: Screen.height/2

    Page {
        Row{
            id: controlRow

            TextField {
                id: textfield
                text: "http://google.com"
                width: units.gu(40)

                Keys.onReturnPressed: {
                    if (textfield.text.substring(0, 7) != "http://")
                        textfield.text = "http://" + textfield.text;
                    webview.url = textfield.text
                }
            }

            Button {
                width: units.gu(10)
                text: i18n.tr("Osvježi")
                onClicked: webview.reload()
            }

            Button {
                width: units.gu(10)
                text: i18n.tr("Naprijed")
                onClicked: webview.goForward()
            }

            Button {
                width: units.gu(10)
                text: i18n.tr("Natrag")
                onClicked: webview.goBack()
            }
        }

        WebView {
            id: webview
            width: parent.width
            anchors.top: controlRow.bottom
            anchors.topMargin: units.gu(1)
            anchors.bottom: parent.bottom

            Component.onCompleted: {
                url = textfield.text
            }
        }
    }
}

相关内容