GridLayout columnSpan woes

shaan7

Hi,

I want to create the following layout-

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-

(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?

ODБOï

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

shaan7

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

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

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)

ODБOï

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

Markkyboy

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

ODБOï

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

Markkyboy

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

shaan7

@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

Markkyboy

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.