How to get columnSpan working in QtQuick GridLayout? - qtquick2

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?

Answer 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.)