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

Resize children based on number



  • How would I update the size of children in a layout (using GridLayout now but not required) so the children evenly take up the space of the parent. I have an app where users can add charts to a page and I'd like them to resize when they are added/removed. I've seen this example on stack overflow, which gets me mostly there, but the size of the children is fixed, I'd like them to resize with the window, like in the pics below Layout1.png
    Layout2.png
    Layout3.png



  • @aconnell said in Resize children based on number:

    How would I update the size of children in a layout (using GridLayout now but not required) so the children evenly take up the space of the parent.

    With GridLayout or ColumnLayout you could use Layout.fillHeight:

    ColumnLayout  {
        Rectangle {
            Layout.fillWidth: true;
            Layout.fillHeight: true;
            color: "blue"
        }
        Rectangle {
            Layout.fillWidth: true;
            Layout.fillHeight: true;
            color: "green"
        }
        Rectangle {
            Layout.fillWidth: true;
            Layout.fillHeight: true;
            color: "yellow"
        }
    }
    

    ==> all 3 rectangles will have same height



  • KroMignon - thanks for the response, but I don't always want them to be evenly sized. I have this now, as you suggested.

            GridLayout {
                id: gridLayout
                columns: 1
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.top: reset.bottom
                anchors.bottom: parent.bottom
    
                Loader {
                    id: chartLoaderOne
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                }
                Loader {
                        id: chartLoaderTwo
                        Layout.fillWidth: true
                        Layout.fillHeight: true
                }
                Loader {
                    id: chartLoaderThree
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                }
            }
    

    The loaders are always 1/3 of the total space. What I'd like it to do is when one chart is added, the whole space of the GridLayout is filled with the one chart. When two added, the charts fill the space 50/50. When three added, they fill 1/3 each. What I'd like to do is something like this - which doesn't work......

    GridLayout {
                id: gridLayout
                columns: 1
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.top: reset.bottom
                anchors.bottom: parent.bottom
                Loader {
                    id: chartLoaderOne
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Layout.minimumHeight: gridLayout.height/3
                    Layout.maximumHeight: gridLayout.height
                }
                Loader {
                        id: chartLoaderTwo
                        Layout.fillWidth: true
                        Layout.fillHeight: true
                        Layout.minimumHeight: 0
                        Layout.maximumHeight: gridLayout.height/2
                }
                Loader {
                    id: chartLoaderThree
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Layout.minimumHeight: 0
                    Layout.maximumHeight: gridLayout.height/3
                }
            }
    


  • Do Layout.minimumHeight on all at 1/3 of parent height (or a fraction based upon number of charts). Then set the active or larger chart to Layout.fillHeight: true. This should enlarge that one to fill the space. This should allow you to use a model with a Repeater or ListView to make it automatically adjust to the number of charts too. You would just have to have a way to identify which chart is the active chart.


Log in to reply