Important: Please read the Qt Code of Conduct -

QML Window implicit size based on component and property changes

  • Having the following QML file; it works correctly. The window resize according to mainLayout implicit size. The problem is that inside mainLayout, I have two mutually exclusive components.

    One is shown when connectionManager.connected == true and the other one when it's false. When the connected attribute changes, I think the following is happening:

    1. Hide the element that need to be hidden according to "connected" value
    2. Resize the window according to mainLayout size (which is almost 0 because the content of the layout is not visible)
    3. Displays the element that need to be according to "connected" value.
    4. Resize the window according to mainLayout size (which is correct).

    The problem is that my window is resized to an invalid geometry. This makes the window blink, and displays an error message in QML. Even if the behavior is correct, it's not visually good.

    Do somebody knows how to avoid this behavior ?

    import QtQuick 2.4
    import QtQuick.Extras 1.4
    import QtQuick.Controls 1.4
    import QtQuick.Window 2.2
    import QtQuick.Layouts 1.2
    import QtQuick.Controls.Styles 1.2
    ApplicationWindow {
        visible: true
        width: mainLayout.implicitWidth + 40
        height: mainLayout.implicitHeight + 40
        ConnectionManager {
            id: connectionManager
            pluginsDirectory: "Plugins"
        ColumnLayout {
            id: mainLayout
            anchors.centerIn: parent
            ConnectionBox {
                id: box
                manager: connectionManager
                visible: !connectionManager.connected
            ColumnLayout {
                visible: connectionManager.connected
                spacing: 10
                GridLayout {
                    columns: 2
                    columnSpacing: 15
                    rowSpacing: 15
                    Button {
                        text: "Test Command"
                    Button {
                        text: "Disconnect"
                        onClicked: connectionManager.closeConnection()
                TextArea {
                    Layout.topMargin: 10
                    Layout.preferredHeight: 300
                    Layout.preferredWidth: 300
                    readOnly: true

Log in to reply