How to get columnSpan working in QtQuick GridLayout?

Question

I am trying to create a simple layouting example using QtQuick Layouts.

My goal is to display a layout using GridLayout where I have 3 columns, the first one using 60% of the space, the second and third using 20% each, for a total of 100%.

I would expect the following to give me the expected results, but for some reason it doesn't:

Window
{
    width: 1920
    height: 1080
    visible: true

    GridLayout
    {
        width: parent.width
        height: parent.height
        columns: 5

        Rectangle
        {
            color: "red"

            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.columnSpan: 3
        }

        Rectangle
        {
            color: "green"

            Layout.fillHeight: true
            Layout.fillWidth: true
        }

        Rectangle
        {
            color: "blue"

            Layout.fillHeight: true
            Layout.fillWidth: true
        }
    }
}

Running the above example gives me the following result, each column using a third of the available space:

What I've tried, without luck:

Removing the explicit columns property for the GridLayout
Specifying an explicit row count for the GridLayout using the rows property
Specifying explicit column and row properties for the rectangles
Specifying explicit columnSpan and rowSpan for all rectangles
Fiddling with the number of columns specified for the GridLayout
Removing the Layout.fillWidth attached properties

What am I doing wrong?

score 1 · Accepted Answer · answered Nov 26 '19 at 22:40

1

I think you're looking for Layout.preferredWidth. When combined with fillWidth: true this acts as a "stretch factor", meaning it becomes relative to the preferred widths of other items in the layout. I just used the percentage values you gave, but any numbers in the same proportions would work (eg. 6, 2, 2).

Window
{
    width: 1920
    height: 1080
    visible: true

    GridLayout
    {
        width: parent.width
        height: parent.height
        columns: 3

        Rectangle
        {
            color: "red"

            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.preferredWidth: 60
        }

        Rectangle
        {
            color: "green"

            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.preferredWidth: 20
        }

        Rectangle
        {
            color: "blue"

            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.preferredWidth: 20
        }
    }
}

(If you specifically wanted to use columnsSpan for some reason, please explain.)

answered Nov 26 '19 at 22:40

Maxim Paperno

4,485
2
18
22

Thank you. I am still curious as to why `columnSpan` does not work the way I imagine it to work though. – Znurre Nov 27 '19 at 06:03
1

@Znurre You're welcome! Well a column span would only come into play when you have multiple rows. Then a column on one row could span multiple columns of the other row(s). Though with the way GridLayout wraps things, this can be tricky to lock down (not at all like QGridLayout unlike the docs claim). There's the `Grid` QML positioner type, but it has no column/row span capabilities (ridiculously). For more precise control you're pretty much stuck with anchors or a custom layout engine. – Maxim Paperno Nov 27 '19 at 06:31
There's an example using column/row spans [here](https://stackoverflow.com/questions/34027727/how-can-i-create-a-qml-gridlayout-with-items-of-proportionate-sizes) you may find useful. Though it's overly complicated for the result IMHO, which is why I didn't refer to it earlier. – Maxim Paperno Nov 27 '19 at 06:32
Also you don't actually need a grid layout for your particular example since just a RowLayout would do (and work the same way). But I assume you're expanding this to multiple rows... :) – Maxim Paperno Nov 27 '19 at 06:33
Thank you very much! :) I am indeed used to the way `QGridLayout` works, and the documentation does not do much to help in this matter. – Znurre Nov 27 '19 at 06:44

How to get columnSpan working in QtQuick GridLayout?

1 Answers1