QML - GridLayout - ROW and COLUMN Span - Understanding

[Vildnex]

I'm trying to learn QML and at this moment I'm having some problems with understanding of rowSpan and columnSpan, so sorry if this question may sound stupid for some of you.

---

WHAT I LEARNED:

Correct me if I'm wrong but in a GridLayout should be like this:

• Layout.row - indicates the line where the object is located;
• Layout.column - indicates the column in which the object is located;
• Layout.rowSpan - indicates how many lines should be stretched object;
• Layout.columnSpan - indicates how many columns should be stretched
  object;

---

WHAT I'M TRYING TO DO:

Well, in this case, I'm trying to recreate this layout over here

This layout, in theory, should have the followings:

• The actual GridLayout should be composed out of 24 columns and 9 rows
• RED shape should be at -> col 0, row 1 -> colSpan 3, rowSpan 7
• BLUE shape should be at -> col 3, row 1 -> colSpan 8, rowSpan 1
• PURPLE shape should be at -> col 3, row 4 -> colSpan 6, rowSpan 3

Or at least that's what I've understood so far.

---

THE PROBLEM:

After I've coded the QML with the col, row accordantly, and also colSpan and rowSpan I've obtained this instead.

---

MY CODE:

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1

Item {
    width: 1366
    height: 512

    GridLayout {
        id: grid

        columns: 24
        rows: 9
        anchors.fill: parent

        Rectangle {

            property var rowSpan: 7
            property var columSpan: 3

            Layout.column: 0
            Layout.row: 1

            Layout.preferredWidth: (parent.width / parent.columns) * columSpan
            Layout.preferredHeight: (parent.height / parent.rows) * rowSpan

            Layout.columnSpan: columSpan
            Layout.rowSpan: rowSpan

            color: "red"

        }

        Rectangle {
            property var rowSpan: 1
            property var columSpan: 8

            Layout.column: 3
            Layout.row: 1

            Layout.preferredWidth: (parent.width / parent.columns) * columSpan
            Layout.preferredHeight: (parent.height / parent.rows) * rowSpan

            Layout.columnSpan: columSpan
            Layout.rowSpan: rowSpan

            color: "blue"
        }
        Rectangle {
            property var rowSpan: 3
            property var columSpan: 6

            Layout.column: 4
            Layout.row: 3

            Layout.preferredWidth: (parent.width / parent.columns) * columSpan
            Layout.preferredHeight: (parent.height / parent.rows) * rowSpan

            Layout.columnSpan: columSpan
            Layout.rowSpan: rowSpan

            color: "purple"
        }
    }
}

---

Could anyone explain to me what I'm doing wrong or which part of GridLayout I didn't get it right?

[fcarney]

I think its doing some autolayout on top of the row and column specifier. I don't quite understand why they even offer the ability to specify row and column as it does not work as I would expect.

import QtQuick 2.12
import QtQuick.Window 2.12

import QtQuick.Controls 1.5
import QtQuick.Layouts 1.12

Window {
    visible: true
    width: 1366
    height: 512
    title: qsTr("Grid Spans")

    Item {
        width: 1366
        height: 512

        GridLayout {
            id: grid

            columns: 24
            rows: 9
            anchors.fill: parent
            columnSpacing: 0
            rowSpacing: 0

            onWidthChanged: {
                console.log(grid.width, grid.height)
            }

            Rectangle {

                property var rowSpan: 1 //7
                property var columSpan: 1 //3

                //Layout.column: 0
                //Layout.row: 1

                Layout.preferredWidth: (parent.width / parent.columns) * columSpan
                Layout.preferredHeight: (parent.height / parent.rows) * rowSpan

                Layout.columnSpan: columSpan
                Layout.rowSpan: rowSpan

                color: "red"

            }

            Rectangle {
                property var rowSpan: 1 //1
                property var columSpan: 1 //8

                //Layout.column: 3
                //Layout.row: 1

                Layout.preferredWidth: (parent.width / parent.columns) * columSpan
                Layout.preferredHeight: (parent.height / parent.rows) * rowSpan

                Layout.columnSpan: columSpan
                Layout.rowSpan: rowSpan

                color: "blue"
            }
            Rectangle {
                property var rowSpan: 1 //3
                property var columSpan: 1 //6

                //Layout.column: 4
                //Layout.row: 3

                Layout.preferredWidth: (parent.width / parent.columns) * columSpan
                Layout.preferredHeight: (parent.height / parent.rows) * rowSpan

                Layout.columnSpan: columSpan
                Layout.rowSpan: rowSpan

                color: "purple"
            }
        }

        GridLayout {
            id: gridlines

            columns: 24
            rows: 9
            anchors.fill: parent
            columnSpacing: 0
            rowSpacing: 0

            Repeater {
                model: gridlines.columns*gridlines.rows
                delegate: transrects
            }
            Component {
                id: transrects

                Rectangle {
                    width: gridlines.width/gridlines.columns
                    height: gridlines.height/gridlines.rows

                    color: "transparent"
                    border.width: 1
                    border.color: "grey"
                    opacity: 0.5
                }
            }
        }
    }

}

Edit:

import QtQuick 2.12
import QtQuick.Window 2.12

import QtQuick.Controls 1.5
import QtQuick.Layouts 1.12

Window {
    visible: true
    width: 1366
    height: 512
    title: qsTr("Grid Spans")

    Item {
        width: 1366
        height: 512

        GridLayout {
            id: grid

            columns: 24
            rows: 9
            anchors.fill: parent
            columnSpacing: 0
            rowSpacing: 0

            onWidthChanged: {
                console.log(grid.width, grid.height)
            }

            Rectangle {

                property var rowSpan: 1 //7
                property var columSpan: 1 //3

                Layout.column: 0
                Layout.row: 1

                Layout.preferredWidth: (parent.width / parent.columns) * columSpan
                Layout.preferredHeight: (parent.height / parent.rows) * rowSpan

                Layout.columnSpan: columSpan
                Layout.rowSpan: rowSpan

                color: "red"

            }

            Rectangle {
                property var rowSpan: 1 //1
                property var columSpan: 1 //8

                Layout.column: 3
                Layout.row: 1

                Layout.preferredWidth: (parent.width / parent.columns) * columSpan
                Layout.preferredHeight: (parent.height / parent.rows) * rowSpan

                Layout.columnSpan: columSpan
                Layout.rowSpan: rowSpan

                color: "blue"
            }
            Rectangle {
                property var rowSpan: 1 //3
                property var columSpan: 1 //6

                Layout.column: 4
                Layout.row: 3

                Layout.preferredWidth: (parent.width / parent.columns) * columSpan
                Layout.preferredHeight: (parent.height / parent.rows) * rowSpan

                Layout.columnSpan: columSpan
                Layout.rowSpan: rowSpan

                color: "purple"
            }
        }

        GridLayout {
            id: gridlines

            columns: 24
            rows: 9
            anchors.fill: parent
            columnSpacing: 0
            rowSpacing: 0

            Repeater {
                model: gridlines.columns*gridlines.rows
                delegate: transrects
            }
            Component {
                id: transrects

                Rectangle {
                    width: gridlines.width/gridlines.columns
                    height: gridlines.height/gridlines.rows

                    color: "transparent"
                    border.width: 1
                    border.color: "grey"
                    opacity: 0.5
                }
            }
        }
    }

}