QML Applicationwindow resize stutter

Question

I am encountering a problem that I hope is because I am bad at coding QML and not because of some fundamental bug in Qt.

Whenever I resize the application window in the horizontal direction (width change) the window doesn't resize to where I release the mouse but "snaps" back to its minimumwidth. I have managed to strip it down to the most basic requirements to reproduce the bug.

Not releasing the mousepress causes the width to dance back and forth between the minimumwidth and where the mouse is.
Removing item removes the bug
Resizing vertically (changing height) MAY sometimes crashes the application if the mouse isn't released for a long time (eg is in state of resizing)
It is practically impossible to resize because of this

main.qml

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

ApplicationWindow {
    id: root
    visible: true
    minimumHeight: 768
    minimumWidth: 1024
    title: qsTr("Test")
    color: "#292525"

    Item {
        width: 0.9*parent.width
        height: 0.1*parent.height
    }
}

Any idea why this is happening?

Robin Burchell Robin Burchell · Accepted Answer · 2017-01-13T15:19:45

You have a form of subtle binding loop. QtQuickControls' ApplicationWindow attempts to keep the size of the window's content to match that of the content inside it, called contentItem, which all children of the ApplicationWindow are (silently) reparented into, but you are making the size of your content dependent on the window that it is residing in.

So, you resize your window, which changes the size of your Item, which changes the size of the contentItem, which makes ApplicationWindow resize your window (fighting with you).

Something like this might work:

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

ApplicationWindow {
    id: root

    visible: true
    minimumHeight: 768
    minimumWidth: 1024
    title: qsTr("Test")
    color: "#292525"

    // This item will just match the Window's size...
    Item {
        anchors.fill: parent

        // ... and here, we'll fill a part of it with a rectangle.
        Rectangle {
            color: "red"
            width: 0.9*parent.width
            height: 0.1*parent.height
        }
    }
}

QML Applicationwindow resize stutter

1 Answers