为什么锚定到ApplicationWindow的项的大小为0 ?

Question

我需要一些像素完美的元素，而其他元素应该是可调整大小的，所以我尽量避免布局，只使用锚。

如果我有一个固定大小的项目作为"主画布"，我可以做任何必要的锚定我的目标。然而，它不能与主窗口一起工作。如果我有一个固定在主窗口上的项目，它的大小报告为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) }
        }
    }
}

所有内容都按原样显示。左边有一个垂直的100px的红色条，右边有一个垂直的50px的蓝色条，其余部分用绿色填充。

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

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

除mainWindow外，所有元素的高度均报告为零。

我需要访问大小，特别是中间区域的大小，因为它必须影响其他类型的元素将被放置，这取决于可用空间。

是什么导致了这种奇怪的行为，我做错了什么吗?如何正确访问中间矩形的大小?

Answer 1

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来强制某些大小