GridLayout: problems with columnSpan and rowSpan

MHermann

Hi all!

Actually I am facing problems using a Grid Layout with columnSpan and rowSpan.
The columnSpan is working. The green boxes have a width of 6 cells.
But the rowSpan is not working. All boxes have the same height (GridLayout.height / 3). Why?

Here is my example code:

...
GridLayout {
    id: mainLayout1
    anchors.fill: parent
    rows: 13
    columns: 12
    rowSpacing: 4
    columnSpacing: 4

    Rectangle {
        color: "red"
        Layout.fillHeight: true
        Layout.fillWidth: true
        Layout.columnSpan: 12
        Layout.rowSpan: 1
    }
    
    Rectangle {
        color: "green"
        Layout.fillHeight: true
        Layout.fillWidth: true
        Layout.columnSpan: 6
        Layout.rowSpan: 10
    }

    Rectangle {
        color: "green"
        Layout.fillHeight: true
        Layout.fillWidth: true
        Layout.columnSpan: 6
        Layout.rowSpan: 10
    }

    Rectangle {
        color: "yellow"
        Layout.fillHeight: true
        Layout.fillWidth: true
        Layout.columnSpan: 12
        Layout.rowSpan: 2
    }
}
...

mostefa

Hi @MHermann

can you describe what you want to obtain with a picture ?

MHermann

@mostefa :

This is what I want to have:

mostefa

@MHermann

Hi maybe you need to use a qml repeater

Here is an example for two rows :

GridLayout {
    id: mainLayout1
    anchors.fill: parent
    rows: 13
    columns: 12
    rowSpacing: 1
    columnSpacing: 4

    //red 
    Repeater {
        model: 12
        Rectangle {
            color: "red"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.columnSpan: 1
            Layout.rowSpan: 1
        }
    }

    Repeater{
        model: 6
        Rectangle{
            color: "green"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.columnSpan: 1
            Layout.rowSpan: 1
        }
    }

    Repeater{
        model: 6
        Rectangle{
            color: "#00ee00"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.columnSpan: 1
            Layout.rowSpan: 1
        }
    }
}

mostefa

Or you can even do better:

Something like this :

```

GridLayout {
id: mainLayout1
anchors.fill: parent
rows: 13
columns: 12
rowSpacing: 1
columnSpacing: 4

    property var values: [ "red", "red", "red", "red", "red" , "red", "red", "red", "red", "red", "red" , "red",
                           "green", "green","green", "green","green", "green","#00ee00", "#00ee00", "#00ee00", "#00ee00","#00ee00", "#00ee00" ]



    //red
    Repeater {
        model: mainLayout1.values
        Rectangle {
            color: modelData
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.columnSpan: 1
            Layout.rowSpan: 1
        }
    }


}

MHermann

@mostefa : Thanks for your answers. But I think you missunderstood me. Maybe my picture was not clear.
I want to have only four rectangles.

One red rectangle on the top which covers 1 row and 12 columns.
Two green rectangles where each covers 10 rows and 6 columns.
One yellow rectangle on the bottom which covers 2 rows and 12 columns.

MHermann

I solved the problem.

...
GridLayout {
    id: mainLayout1
    anchors.fill: parent
    rows: 13
    columns: 12

    property double colWidth: width/columns
    property double rowHeight: height/rows

    function prefWidth(item){
        return ((colWidth * item.Layout.columnSpan) + (columnSpacing * (item.Layout.columnSpan-1)))
    }
    function prefHeight(item){
        return ((rowHeight * item.Layout.rowSpan) + (rowSpacing * (item.Layout.rowSpan -1)))
    }

    Rectangle {
        color: "red"
        Layout.columnSpan: 12
        Layout.rowSpan: 1
        Layout.preferredWidth: mainLayout1.prefWidth(this)
        Layout.preferredHeight: mainLayout1.prefHeight(this)
    }
    
    Rectangle {
        color: "green"
        Layout.columnSpan: 6
        Layout.rowSpan: 10
        Layout.preferredWidth: mainLayout1.prefWidth(this)
        Layout.preferredHeight: mainLayout1.prefHeight(this)
    }

    Rectangle {
        color: "green"
        Layout.columnSpan: 6
        Layout.rowSpan: 10
        Layout.preferredWidth: mainLayout1.prefWidth(this)
        Layout.preferredHeight: mainLayout1.prefHeight(this)
    }

    Rectangle {
        color: "yellow"
        Layout.columnSpan: 12
        Layout.rowSpan: 2
        Layout.preferredWidth: mainLayout1.prefWidth(this)
        Layout.preferredHeight: mainLayout1.prefHeight(this)
    }
}
...