QML - Not able to get width,height etc in “On Comp

Question

I need to get width and height of a Rectangle in Component.OnCompleted handler but if i print the same i am getting some unknown values, Following is the code:

[EDIT-1] - Added more code.

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" .
            }
        }
    }
}

How To get width, height in onCompleted?

Answer 1

The parent of items, nested directly in the window is not the window, but the window's contentItem.

Try this instead:

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

The same applies for your "full code":

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"
            }
        }
    }

You can use parent in the second rectangle, because its parent will be the first rectangle, but since the first is nested inside the window, it needs to refer to the window instead of its parent to get property sized.

Answer 2

Ok, I'll try to start again:
Your problem is a misconception, what hides behind 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
    }
}

Here you assume, parent for someRect is appWindow, and therefor, parent.width = appWindow.width = 600. This is wrong

The parent of someRect can't be appWindow, as appWindow is not of type Item. In fact, someRect.parent === appWindow.contentItem, so width: parent.width => width: appWindow.contentItem.width.

The problem is, that the width of the contentItem is 0 when created, and will reseized to appWindow.width only after creation.

This means, that someRect.width is also 0 until the width of appWindow.contentItem has been resized to 600 - which won't happen until Component.onCompleted is executed.

The solution is, to shortcut the dependency on a width of appWindow.contentItem, as the final value is available from the start, in the property appWindow.width.

Let's see another example:

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"
        }
    }
}

Here, the height will be set right from the start, while the width will change only as soon as appWindow.contentItem is being resized. So it is better to follow the way, I used for the height.

There are many QML Components, where the parent might not be, what it seems. For custom Components that are, e.g. all Components that use default property alias to push "children" into nested Items.