Question

我需要在 Component.OnCompleted 处理程序中获取Rectangle的宽度和高度，但如果我打印相同的我得到一些未知值，以下是代码：

[EDIT-1] - 添加了更多代码。

import QtQuick 2.6
import QtQuick.Controls 2.2
import QtQuick.Window 2.3

ApplicationWindow {
    id: appWindow
    visible: true
    width: 600
    height: 400
    title: qsTr("test")
    flags:  Qt.Window | Qt.FramelessWindowHint

    Rectangle{
        id:rectParent
        width:parent.width * 0.75
        height: parent.height * 0.70
        Rectangle{
            id:rectChild
            width:parent.width * 0.75
            height: parent.height * 0.70
            Component.onCompleted: {
                console.log("Width=",width) //prints "0" .
            }
        }
    }
}

如何在onCompleted中获得宽度，高度？

Answer 1

好的，我会尝试重新开始：
你的问题是一种误解，隐藏背后的parent。

import QtQuick 2.6
import QtQuick.Controls 2.0
ApplicationWindow {
    id: appWindow
    width: 600
    height: 400
    visible: true
    Rectangle {
        id: someRect
        width: parent.width * 0.7
        heigth: parent.height * 0.7
    }
}

您可以假设parent someRect为appWindow，parent.width = appWindow.width = 600。someRect。 这是错误的

appWindow的父级不能appWindow，因为Item不属于someRect.parent === appWindow.contentItem类型。事实上，width: parent.width => width: appWindow.contentItem.width，contentItem。

问题是，0的宽度在创建时为appWindow.width，并且仅在创建后重新设置为someRect.width。

这意味着0也是appWindow.contentItem，直到600的宽度调整为Component.onCompleted - 直到appWindow.contentItem才会发生这种情况。执行。

解决方案是，在{strong> appWindow.width 属性中，从一开始就可以获得import QtQuick 2.6 import QtQuick.Controls 2.0 ApplicationWindow { id: appWindow width: 600 height: 400 visible: true Rectangle { id: someRect width: parent.width * 0.7 // depends on appWindow.contentItem.width -> initally 0, changing soon after heigth: appWindow.height * 0.7 // depends on appWindow.height -> initially 400. Component.onCompleted: console.log('someRect:', width, height) // prints: "someRect: 0 280" Rectangle { id: someOtherRect width: parent.width * 0.7 // depends on someRect.width which is initally 0 as it depends on appWindow.contentItem.width height: parent.height * 0.7 // depends on someRect.height which is initally 400 * 0.7 Component.onCompleted: console.log('someOtherRect:', width, height) // prints "someOtherRect: 0, 196" } } }宽度的依赖关系的快捷方式。

让我们看另一个例子：

appWindow.contentItem

此处，高度将从头开始设置，而宽度只会在height调整大小后立即更改。因此，最好按照我用于default property alias。

的方式

有许多QML组件，其中父级可能不是，它看起来像什么。对于自定义组件，例如所有使用Item推送＆＃34;儿童＆＃34;嵌套/layout s。

Answer 2

直接嵌套在窗口中的parent个项目不是窗口，而是窗口contentItem。

请改为尝试：

Rectangle{
       id:rect
       width: appWindow.width * 0.75
       height: appWindow.height * 0.70
}

这同样适用于您的＆＃34;完整代码＆＃34;：

Rectangle{
        id:rectParent
        width:appWindow.width * 0.75
        height: appWindow.height * 0.70
        Rectangle{
            id:rectChild
            width:parent.width * 0.75
            height: parent.height * 0.70
            Component.onCompleted: {
                console.log("Width=",width) //prints "Width= 337.5"
            }
        }
    }

您可以在第二个矩形中使用parent，因为它的父级将是第一个矩形，但由于第一个矩形嵌套在窗口内，因此需要引用窗口而不是其父级来获取属性大小

QML - 无法在“完成时”获得宽度，高度等

2 个答案: