QML GridLayout span

Question

How can I make the magenta rectangle to become 6 times shorter than the red rectangle?

    GridLayout {
        id: gridLayout
        anchors.fill: parent
        flow: GridLayout.TopToBottom
        Rectangle {color: "magenta"
            Layout.row: 0
            Layout.column: 0
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.rowSpan: 1
        }
        Rectangle {
            Layout.row: 0
            Layout.column: 1
            color: "red"
            Layout.rowSpan: 6
            Layout.fillHeight: true
            Layout.fillWidth: true
        }
    }

https://i.stack.imgur.com/nHfmB.gif

Answer 1

The Layout.fillHeight is the problem; it tries to be as tall as possible. Instead, set Layout.preferredHeight to the desired height for the first column. Also, it is not necessary to change the flow when you specify the row and column for each Rectangle -- use Layout.alignment to fill from the top:

GridLayout {
    id: gridLayout
    anchors.fill: parent
    Rectangle {
        Layout.row: 0
        Layout.column: 0
        Layout.fillWidth: true
        Layout.preferredHeight: parent.height/6
        Layout.alignment: Qt.AlignTop
        color: "magenta"
    }
    Rectangle {
        Layout.row: 0
        Layout.column: 1
        Layout.fillHeight: true
        Layout.fillWidth: true
        color: "red"
    }
}