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

时间:2017-08-10 08:55:39

标签: qt qml qtquick2

我需要在 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中获得宽度,高度?

2 个答案:

答案 0 :(得分:3)

好的,我会尝试重新开始:
你的问题是一种误解,隐藏背后的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 someRectappWindowparent.width = appWindow.width = 600someRect这是错误的

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

问题是,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推送"儿童"嵌套/layout s。

答案 1 :(得分:2)

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

请改为尝试:

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

这同样适用于您的"完整代码":

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,因为它的父级将是第一个矩形,但由于第一个矩形嵌套在窗口内,因此需要引用窗口而不是其父级来获取属性大小