GridLayout: problems with columnSpan and rowSpan



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


  • Hi @MHermann

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



  • @mostefa :

    This is what I want to have:
    0_1512542614301_Unbenannt.jpg



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


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


  • @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.


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

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.