GridLayout columnSpan property doesn't work as expected [duplicate] - qt

Question

I'm trying to figure out a way to layout items proportionally by specifying a kind of weight for each item. For example the way Android does their layouts.
The way I'm trying to achieve it is like so:
import QtQuick 2.10
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
GridLayout {
columns: 4
width: 640
height: 480
Rectangle {
color: "red"
Layout.fillHeight: true
Layout.fillWidth: true
Layout.columnSpan: 1
}
Rectangle {
color: "#80000000"
Layout.fillHeight: true
Layout.fillWidth: true
Layout.columnSpan: 2
}
Rectangle {
color: "blue"
Layout.fillHeight: true
Layout.fillWidth: true
Layout.columnSpan: 1
}
}
I would expect the width of the middle rectangle to be the sum of the other two rectangles, but instead they are all equal widths.
Using relational bindings on the Layout attached properties seems to always lead to weird binding loops. I know I could just use a Row instead with relational bindings, but I'd prefer to use Layouts if possible.
EDIT
This seems to work the way I want it to, but I don't know why it works. It behaves as if the preferredWidth value is the weight of the item.
import QtQuick 2.10
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
RowLayout {
width: 640
height: 480
Rectangle {
color: "red"
Layout.fillHeight: true
Layout.fillWidth: true
Layout.preferredWidth: 1
}
Rectangle {
color: "#80000000"
Layout.fillHeight: true
Layout.fillWidth: true
Layout.preferredWidth: 2
}
Rectangle {
color: "blue"
Layout.fillHeight: true
Layout.fillWidth: true
Layout.preferredWidth: 1
}
}

Answer 1

Not sure if intentional or not but Layout.preferredWidth (or Layout.preferredHeight for ColumnLayouts) can be used as a "weight". Things break when also specifying Layout.minimumWidth, but I don't think it makes much sense to be specify minimum dimensions when trying to implement layouts in terms of weights anyways.
import QtQuick 2.10
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
RowLayout {
width: 640
height: 480
Rectangle {
color: "red"
Layout.fillHeight: true
Layout.fillWidth: true
Layout.preferredWidth: 1
}
Rectangle {
color: "#80000000"
Layout.fillHeight: true
Layout.fillWidth: true
Layout.preferredWidth: 2
}
Rectangle {
color: "blue"
Layout.fillHeight: true
Layout.fillWidth: true
Layout.preferredWidth: 1
}
}