QML 布局：如何为行或列布局中的项目赋予权重？

Question

我试图找出一种通过为每个项目指定一种权重来按比例布置项目的方法。例如 Android 的方式 layouts.

我尝试实现它的方式是这样的：

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

我希望中间矩形的宽度是其他两个矩形的总和，但实际上它们的宽度都相等。

在布局附加属性上使用关系绑定似乎总是会导致奇怪的绑定循环。我知道我可以只使用行而不是关系绑定，但如果可能的话我更愿意使用布局。

编辑

这似乎按照我想要的方式工作，但我不知道为什么会这样。它的行为就好像 preferredWidth 值是项目的重量。

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

不确定是否有意，但 Layout.preferredWidth（或 ColumnLayouts 的 Layout.preferredHeight）可以用作 "weight"。当还指定 Layout.minimumWidth 时，事情会中断，但我认为无论如何在尝试根据权重实现布局时指定最小尺寸没有多大意义。

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

QML 布局：如何为行或列布局中的项目赋予权重？

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

qt

qml

qgridlayout