Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

QML - GridLayout - ROW and COLUMN Span - Understanding



  • 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
    enter image description 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.

    enter image description here


    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?



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

Log in to reply