Potencialmente relacionado:https://stackoverflow.com/a/30860285/3363018

He estado tratando de crear un diseño QML con elementos que abarcan números variables de filas y columnas. Entonces, por ejemplo, un rectángulo que abarca dos filas y cuatro columnas, una a la derecha que abarca una fila y dos columnas, y una debajo que abarca tres filas y cinco columnas. A continuación se muestra un intento genérico de crear esto:

import QtQuick 2.5
import QtQuick.Layouts 1.2
import QtQuick.Controls 1.4

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    GridLayout {
        anchors.fill: parent

        columns: 5
        rows: 2

        Rectangle {
            Layout.column: 0
            Layout.columnSpan: 4
            Layout.row: 0
            Layout.rowSpan: 2

            Layout.fillHeight: true
            Layout.fillWidth: true

            color: "red"
        }

        Rectangle {
            Layout.column: 4
            Layout.columnSpan: 1
            Layout.row: 0
            Layout.rowSpan: 2

            Layout.fillHeight: true
            Layout.fillWidth: true

            color: "green"
        }

        Rectangle {
            Layout.column: 0
            Layout.columnSpan: 5
            Layout.row: 2
            Layout.rowSpan: 3

            Layout.fillHeight: true
            Layout.fillWidth: true

            color: "blue"
        }
    }
}

lo que resulta en esto:

Como puede ver, Layout.rowSpan y Layout.columnspan no parecen estar funcionando. En cambio, las dos filas superiores parecen ocupar 1: 1 en lugar de 4: 1 y la parte superior frente a la parte inferior son 1: 1 en lugar de 2: 3. Sospecho que esto está relacionado con Layout.fillHeight y Layout.fillWidth.La documentación estados:

Si esta propiedad es verdadera, el elemento será lo más ancho posible respetando las restricciones dadas.

pero no estoy seguro de cuáles son "las restricciones dadas" en este contexto. Esperaba que incluyera el espacio de la fila y la columna, pero parece que no.

Probablemente podría calcular directamente los anchos y las alturas de los elementos (o tal vez Layout.preferredWidth y Layout.preferredHeight), pero eso parecería hacer que Layout.rowSpan y Layout.columnSpan sean completamente superfluos. ¿Hay alguna manera de calcular automáticamente las alturas en función de las filas y columnas de la cuadrícula?