Resize children based on number

aconnell

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

KroMignon

@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

aconnell

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
            }
        }

fcarney

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.