[Solved] Dynamic GridLayout

MattB.au

GridLayout seems to only setup the layout based on the original size of its contents. Is there a way to make the layout update when its children change size (which I would have expected it to do automatically)? I'm trying to setup a flowchart style UI where each item in the chart can be in an expanded or collapsed mode and I'm trying to use a GridLayout to keep everthing aligned.

eg.

@
import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.0

ApplicationWindow {
width: 500
height: 500

GridLayout {

    columns: 2
    anchors.centerIn: parent

    Rectangle {
        property bool expanded: false
        width: expanded ? 150 : 100;
        height: expanded ? 100 : 50;
        color: 'red'
        MouseArea {
            anchors.fill: parent;
            onClicked: parent.expanded = !parent.expanded
        }
    }

    Rectangle {
        property bool expanded: false
        width: expanded ? 150 : 100;
        height: expanded ? 100 : 50;
        color: 'green'
        MouseArea {
            anchors.fill: parent;
            onClicked: parent.expanded = !parent.expanded
        }
    }

    Rectangle {
        property bool expanded: false
        width: expanded ? 150 : 100;
        height: expanded ? 100 : 50;
        color: 'blue'
        MouseArea {
            anchors.fill: parent;
            onClicked: parent.expanded = !parent.expanded
        }
    }
}

}
@

Thanks

Vincent007

I think you should set layout attached properties instead of item's width and height.

MattB.au

Thanks Vincent, that was the bit I was missing. Looks like you can use Layout.preferredHeight/width - although if this is left as default then it instead uses the items 'implicitHeight' and 'implicitWidth' as opposed to it's normal 'height' and 'width'.

So changing my example to use implicitWidth/implicitHeight does the trick

@
import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.0

ApplicationWindow {
width: 500
height: 500

GridLayout {

    columns: 2
    anchors.centerIn: parent

    Rectangle {
        property bool expanded: false
        implicitWidth: expanded ? 150 : 100;
        implicitHeight: expanded ? 100 : 50;
        color: 'red'
        MouseArea {
            anchors.fill: parent;
            onClicked: parent.expanded = !parent.expanded
        }
    }

    Rectangle {
        property bool expanded: false
        implicitWidth: expanded ? 150 : 100;
        implicitHeight: expanded ? 100 : 50;
        color: 'green'
        MouseArea {
            anchors.fill: parent;
            onClicked: parent.expanded = !parent.expanded
        }
    }

    Rectangle {
        property bool expanded: false
        implicitWidth: expanded ? 150 : 100;
        implicitHeight: expanded ? 100 : 50;
        color: 'blue'
        MouseArea {
            anchors.fill: parent;
            onClicked: parent.expanded = !parent.expanded
        }
    }
}

}
@

Thanks again.