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

GridLayout columnSpan woes



  • Hi,

    I want to create the following layout-

    dc0b3043-7bb7-4610-b8ae-6c86f30ae558-image.png

    From what I understand, this code should work:

    GridLayout {
                columns: 5
        
                Rectangle {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    color: "red"
                }
        
                Rectangle {
                    Layout.columnSpan: 3
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    color: "blue"
                }
        
                Rectangle {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    color: "green"
                }
        
                Rectangle {
                    Layout.columnSpan: 5
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                    color: "yellow"
                }
            }
    

    But running it shows the following-

    bc5bdbed-24b8-492a-8f25-eb2aee91417e-image.png

    (The problem is that the blue Rectangle should be much larger than the red and green ones, but that is not the case.

    What am I doing wrong?



  • @shaan7 said in GridLayout columnSpan woes:

    much larger

    red and the green should have Layout.fillWidth: false

        GridLayout {
            columns: 5
            anchors.fill: parent
            Rectangle {
                Layout.fillWidth: false
                Layout.preferredWidth: 250
                Layout.fillHeight: true
                color: "red"
            }
    
            Rectangle {
                Layout.columnSpan: 3
                Layout.fillWidth: true
                Layout.fillHeight: true
                color: "blue"
            }
    
            Rectangle {
                Layout.fillWidth: false
                Layout.fillHeight: true
                Layout.preferredWidth: 250
                color: "green"
            }
    
            Rectangle {
                Layout.columnSpan: 5
                Layout.fillHeight: true
                Layout.fillWidth: true
                color: "yellow"
            }
        }
    


  • @LeLev If the width is hardcoded to 250, it looks like this when my delegate is 300px wide-

    c4593426-893f-49c0-b283-9de566b526d4-image.png

    It works if I make the whole thing wider, like 600px for example-

    94f29c7a-9f5d-41e3-9b56-685328b58aa3-image.png

    But that kinda destroys the whole point of using Layouts, I need the thing to be resizable while still keeping proportions.

    (P.S. I used 100 instead of 250 in these screenshots to convey the point)



  • @shaan7 said in GridLayout columnSpan woes:

    It works if I make the whole thing wider, like 600px for example-

    it also works if you resize the window, that is the point of using Layouts

    @shaan7 said in GridLayout columnSpan woes:

    hardcoded to 250

    you do not have to hardcode

    //tested example
    ApplicationWindow {
    
        width: 800
        height: 600
        visible: true
    
    
        GridLayout {
            id:grid
            columns: 5
            anchors.fill: parent
    
            Rectangle {
                Layout.fillWidth: false
                Layout.preferredWidth: grid.width * 0.2
                Layout.fillHeight: true
                color: "red"
            }
    
            Rectangle {
                Layout.columnSpan: 3
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.minimumWidth: grid.width * 0.6
                Layout.preferredWidth: grid.width * 0.6
                color: "blue"
            }
    
            Rectangle {
                Layout.fillWidth: false
                Layout.preferredWidth: grid.width * 0.2
                Layout.minimumWidth:  grid.width * 0.2
                Layout.fillHeight: true
                color: "green"
            }
    
            Rectangle {
                Layout.columnSpan: 5
                Layout.fillHeight: true
                Layout.fillWidth: true
                color: "yellow"
            }
        }
    }
    
    


  • Hi, my first (coding) post, I hope I have this right, here's my approach;

    GridLayout {
        rows: 2
        columns: 4
        anchors.fill: parent
    
        Rectangle { // row 1 - column 1
            color: "red"
            Layout.fillHeight: true
            Layout.fillWidth: true
        }
        Rectangle { // row 1 - column 2 && column 3
            color: "blue"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.preferredWidth: 2
            Layout.columnSpan: 2
        }
        Rectangle { // row 1 - column 4
            color: "green"
            Layout.fillHeight: true
            Layout.fillWidth: true
        }
        Rectangle { // row 2 - span all 4 columns
            color: "yellow"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.preferredWidth: 4
            Layout.columnSpan: 4
            Layout.row: 2
        }
    }
    

    gridlayout.JPG



  • @Markkyboy hi
    its a nice approach works nicely,
    it now depends what dynamic behavior the OP needs



  • @LeLev - thanks, although, on reflection, rather than 'fix' the code given by the OP, I've just jumped in with my own take, which works, but ultimately, the OP ( @shaan7 ) just needs to add one single line of code to the blue rectangle; Layout.preferredWidth: 3 and the code then works.



  • @LeLev said in GridLayout columnSpan woes:

    it also works if you resize the window, that is the point of using Layouts

    Ah I wasn't clear, I meant it works only if I make it larger. When its small (my first screenshot), the blue box is same width as red/green, instead of being wider.

    @Markkyboy your solution is what I was looking for! So I'm guessing that when fillWidth is set to true, GridLayout treats the preferredWidth value as the number of columns (instead of pixels, as it normally would), is that correct?

    Also, I'm curious - how did you figure that out? Its not apparent from the documentation https://doc.qt.io/qt-5/qml-qtquick-layouts-gridlayout.html



  • Hi @shaan7,

    I'm quite new to Qt/QML and so I don't always understand what I'm doing.

    It would seem that, yes; GridLayout treets preferredWidth as column value, not pixels, at least that's what I glean so far.

    I checked out what properties GridLayout affords us, noticed that your code did not contain preferredWidth. I simply tried adding it and it worked!,. . . luck rather than judgement.


Log in to reply