QML Window implicit size based on component and property changes

[Thibaut D.]

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