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

问题

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

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

来源：https://stackoverflow.com/questions/50651369/qml-layouts-how-to-give-weights-to-items-in-a-row-or-column-layout

标签

qml

qgridlayout