Important: Please read the Qt Code of Conduct -

Window width and height in QML

  • Hello

    I've got a strange question. Is it possible to find out a root qml Item size when the window is maximized (viewer.showMaximized(); method is used). I'm asking because this code

    Item {
    id: root
    Component.onCompleted: console.log("width" + root.width)

    Prints 0 and as a result I cannot adjust item's children base on parent width/height.
    I've tried to play with viewer.setResizeMode(QQuickView::SizeRootObjectToView); but it's not going to help.

    Thanks a lot,

  • Hi,

    Not sure if this helps but I have found that if I import QtQuick.Window 2.1 then I can use Screen.desktopAvailableWidth and Screen.desktopAvailableHeight. Hope that helps

  • Hey,

    first of all: root.width is printing you 0 because it's width is 0. From where do you want to find out your QML Item size? If you want to find it out from QML then you'll have to do it like you already did. If you want to find it out from Cpp use QObject::property on your rootObject. Could you please describe more what you're trying to do?

  • bq. "Could you please describe more what you’re trying to do?"

    Ok, first of all I maximize my window from C++ code: viewer.showMaximized(); Since the window is maximized I cannot specify exact width&height in qml file because I don't know them. Later, in "Component.onCompleted" I'm going to create dynamically a dialog (a Rectangle) and put it into "root" item center. So It should look something like that:

    var dialog = dialogComponent.createObject(root);
    dialog.x = (root.width - dialog.width) / 2;
    dialog.y = (root.height - dialog.height) / 2;

    But since root.width/height is not set explicitly it's not going to work.

  • maksim1979, it works fine for me:

    @import QtQuick 2.0

    Rectangle {
    id: root;
    width: 256;
    height: 306;

    MouseArea {
        anchors.fill: parent
        onClicked: {console.log(root.width + " " + root.height)}


    So, even if width and height are set, showMaximized() will override that here and the correct width and height will be printed to the console.
    Sorry if I'm misunderstanding what you're trying to say.

    EDIT: I also don't think you'll need to create the dialog dynamically. If you don't need to move the dialog around, you can just set its anchors.centerIn: parent. If you do need to move it, then its x and y properties like this:

    @x: (root.width - dialog.width)/2
    y: (root.height - dialog.height)/2@

Log in to reply