Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

[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.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



  • 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.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.


Log in to reply