Help with QML GridLayout RowSpan and ColumnSpan

PaulGroves

Perhaps I just don't understand the purpose of Layout.rowSpan / Layout.columnSpan but it seems like they don't work properly with GridLayout.

In the QML below I want to have 3 color rows, with the black row taking up 3/5ths of the height and the other two taking up 1/5th:

import QtQuick
import QtQuick.Window
import QtQuick.Layouts 1.15


Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    GridLayout
    {
        rows: 5
        columns: 1
        anchors.fill: parent

        // Take up 3/5ths of the available height
        Rectangle
        {
            Layout.row: 0
            Layout.column: 0
            Layout.rowSpan: 3
            Layout.fillHeight: true
            Layout.fillWidth: true
            color: "black"
        }

        // Take up 1/5
        Rectangle
        {
            Layout.row: 3
            Layout.column: 0
            Layout.rowSpan: 1
            Layout.fillHeight: true
            Layout.fillWidth: true
            color: "white"
        }

        // The final 1/5
        Rectangle
        {
            Layout.row: 4
            Layout.column: 0
            Layout.rowSpan: 1
            Layout.fillHeight: true
            Layout.fillWidth: true
            color: "red"
        }
    }
}

What I get is 3 bars of the same height. If I leave Layout.rowSpan out it makes no difference.
What am I doing wrong?

Thanks in advance!

ndias

Hi @PaulGroves,

I found the solution for your problem using Layout.preferredHeight property instead Layout.rowSpan.

import QtQuick
import QtQuick.Window
import QtQuick.Layouts


Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    GridLayout
    {
        rows: 3
        columns: 1
        anchors.fill: parent

        Rectangle
        {
            Layout.row: 0
            Layout.column: 0
            Layout.preferredHeight: 3   // 2 of 5 rows
            Layout.fillHeight: true
            Layout.fillWidth: true
            color: "black"
        }

        Rectangle
        {
            Layout.row: 1
            Layout.column: 0
            Layout.preferredHeight: 1   // 1 of 5 rows
            Layout.fillHeight: true
            Layout.fillWidth: true
            color: "white"
        }

        // The final 1/5
        Rectangle
        {
            Layout.row: 2
            Layout.column: 0
            Layout.preferredHeight: 1   // 1 of 5 rows
            Layout.fillHeight: true
            Layout.fillWidth: true
            color: "red"
        }
    }
}

Markkyboy

Nicely done, I was just in the middle of checking this against a project i created......you beat me to it! :P

Markkyboy

Also, using @ndias's reply, you could also format the layout using ColumnLayout;

import QtQuick    
import QtQuick.Window    
import QtQuick.Layouts

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

    ColumnLayout {
        spacing: 0
        anchors.fill: parent

        Rectangle {
             Layout.preferredHeight: 3   // 3 of 5 rows
            Layout.fillHeight: true
            Layout.fillWidth: true
            color: "black"
        }
        Rectangle {
            Layout.preferredHeight: 1   // 1 of 5 rows
            Layout.fillHeight: true
            Layout.fillWidth: true
            color: "white"
        }
        Rectangle {
             Layout.preferredHeight: 1   // 1 of 5 rows
             Layout.fillHeight: true
             Layout.fillWidth: true
             color: "red"
        }
    }
}

PaulGroves

@ndias Thank you, I've been beating my head! Don't know why the original doesn't work but I no longer care.