首页 文章

为什么锚定到ApplicationWindow的项目大小为零？

提问于
浏览 次
0

我需要一些像素完美的元素，以及其他应该可调整大小的元素，所以我尝试避免布局，只使用锚点 .

如果我有一个固定大小的项目作为“主画布”，我可以为锚定目标做任何必要的事情 . 但是，它不适用于主窗口 . 如果我有一个锚定到主窗口的项目，则其大小报告为零

ApplicationWindow
{
    id: mainWindow
    width: 1024
    height: 768
    minimumWidth: 800
    minimumHeight: 480
    Component.onCompleted: { console.log("mainWindow width: " + width) }

    Item
    {
        id: topLevelItem
        anchors.fill: parent
        Component.onCompleted: { console.log("topLevelItem width: " + width) }
    }
}

有趣的是， topLevelItem 的宽度打印为 0 ，而 mainWindow 的宽度正确打印为 1024 .

我添加了一些元素，现在它变得奇怪了：

ApplicationWindow
{
    id: mainWindow
    width: 1024
    height: 768
    minimumWidth: 800
    minimumHeight: 480
    Component.onCompleted: { console.log("mainWindow width: " + width) }

    Item
    {
        id: topLevelItem
        anchors.fill: parent
        Component.onCompleted: { console.log("topLevelItem width: " + width) }

        Rectangle
        {
            id: red
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            anchors.left: parent.left

            width: 100
            color: "#FF0000"

            Component.onCompleted: { console.log("red width: " + width) }
        }


        Rectangle
        {
            id: green

            anchors.top: parent.top
            anchors.bottom: parent.bottom
            anchors.left: red.right
            anchors.right: blue.left

            color: "#00FF00"

            Component.onCompleted: { console.log("green width: " + width) }
        }

        Rectangle
        {
            id: blue

            anchors.top: parent.top
            anchors.bottom: parent.bottom
            anchors.right: parent.right

            width: 50
            color: "#0000FF"

            Component.onCompleted: { console.log("blue width: " + width) }
        }

    }

}

一切都按照应有的方式显示 . 左侧有一个100 px的垂直红色条，右边有一个50 px的垂直蓝色条，其余的则是绿色 .

令人惊讶的是，尺寸错误：

qml: topLevelItem width: 0
qml: blue width: 50
qml: green width: -150
qml: red width: 100
qml: mainWindow width: 1024

除 mainWindow 外，所有事物的高度均报告为零 .

我需要访问大小，特别是中间区域的大小，因为它必须影响将放置哪种其他元素，具体取决于可用空间 .

造成这种奇怪行为的原因是什么，我做错了什么？如何正确访问中间矩形的大小？

qt user-interface qml

1 回答

  • 2

    QML是一种声明性语言，这意味着如果你试图过分依赖某些事物的评估顺序，你就会发现自己正在与它作斗争 . 如果你改变了 topLevelItem 的 width ，你会发现它最终是正确的：

    import QtQuick 2.7
import QtQuick.Controls 1.0

ApplicationWindow {
    id: mainWindow
    width: 1024
    height: 768
    minimumWidth: 800
    minimumHeight: 480
    visible: true

    Component.onCompleted: console.log("mainWindow width: " + width)

    Item {
        id: topLevelItem
        anchors.fill: parent
        onWidthChanged: print("topLevelItem width: " + width)
        Component.onCompleted: console.log("topLevelItem width: " + width)
    }
}

    输出：

    qml: topLevelItem width: 0
qml: mainWindow width: 1024
qml: topLevelItem width: 1024

    我可能首先得到它的大小，然后告诉 contentItem 它可以开始布置它的物品并给它们大小 . 这是异步发生的，也是在某些情况下不应依赖命令式代码的原因之一 .

    值得指出的是，在使用布局时，你可以拥有像素完美的项目和可调整大小的项目;使用例如 Layout.minimumWidth 和 Layout.maximumWidth 强制某些尺寸 .

    回复于

相关问题