Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. [Solved] Dynamic GridLayout
Forum Updated to NodeBB v4.3 + New Features

[Solved] Dynamic GridLayout

Scheduled Pinned Locked Moved QML and Qt Quick
3 Posts 2 Posters 1.5k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • M Offline
    M Offline
    MattB.au
    wrote on last edited by
    #1

    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

    1 Reply Last reply
    0
    • V Offline
      V Offline
      Vincent007
      wrote on last edited by
      #2

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

      1 Reply Last reply
      0
      • M Offline
        M Offline
        MattB.au
        wrote on last edited by
        #3

        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.

        1 Reply Last reply
        0

        • Login

        • Login or register to search.
        • First post
          Last post
        0
        • Categories
        • Recent
        • Tags
        • Popular
        • Users
        • Groups
        • Search
        • Get Qt Extensions
        • Unsolved