[Solved] Dynamic GridLayout
-
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.0ApplicationWindow {
width: 500
height: 500GridLayout { 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
-
I think you should set layout attached properties instead of item's width and height.
-
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.0ApplicationWindow {
width: 500
height: 500GridLayout { 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.