如何让 columnSpan 在 QtQuick GridLayout 中工作？

Question

我正在尝试使用 QtQuick Layouts 创建一个简单的布局示例。

我的目标是使用 GridLayout 显示布局，其中我有 3 列，第一列使用 space 的 60%，第二和第三列各使用 20%，总计的 100%。

我希望以下内容能给我预期的结果，但由于某些原因它没有：

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

运行上面的例子给出了以下结果，每列使用三分之一的可用 space:

我试过的方法，没有运气：

为 GridLayout

columns

使用 rows 属性

GridLayout

为矩形指定显式 column 和 row 属性
为所有矩形指定显式 columnSpan 和 rowSpan
调整为 GridLayout
删除 Layout.fillWidth 附加属性

我做错了什么？

Answer 1

我认为您正在寻找 Layout.preferredWidth。当与 fillWidth: true 组合时，它充当 "stretch factor"，这意味着它相对于布局中其他项目的首选宽度。我只是使用了您提供的百分比值，但任何相同比例的数字都可以使用（例如 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
        }
    }
}

（如果您出于某种原因特别想使用 columnsSpan，请说明。）

如何让 columnSpan 在 QtQuick GridLayout 中工作？

How to get columnSpan working in QtQuick GridLayout?

qtquick2