QML Layouts: How to give weights to items in a row or column layout?

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

Possible duplicate of [How can I create a QML GridLayout with items of proportionate sizes?](https://stackoverflow.com/questions/34027727/how-can-i-create-a-qml-gridlayout-with-items-of-proportionate-sizes) — eyllanesc, Jun 01 '18 at 22:09
This is to be given more attention! If you replace in your same code `columnSpan` with `rowSpan` then it works as supposed to i.e the middle rectangle spans 2 rows .. So why `columnSpan` is not working requires a subtle reasoning unless thats just a bug??!! — Mohammad Kanan, Jun 01 '18 at 23:26
By same token, if you set the layout flow to be `flow: GridLayout.TopToBottom` , again column spanning works — Mohammad Kanan, Jun 01 '18 at 23:42

score 6 · Accepted Answer · answered Jun 06 '18 at 15:59

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

Awesome! How is this not in the [Layout](https://doc.qt.io/qt-5/qtquicklayouts-overview.html#specifying-preferred-size) [docs](https://doc.qt.io/qt-5/qml-qtquick-layouts-layout.html#preferredHeight-attached-prop)?!? — Russ, Dec 03 '20 at 23:57
[Now it is!](https://doc.qt.io/qt-6.2/qml-qtquick-layouts-layout.html) "the layout will grow or shrink the items relative to the ratio of their preferred size." - still not super clear though — Malachi, Apr 14 '23 at 08:08

QML Layouts: How to give weights to items in a row or column layout?

1 Answers1

Linked

Related