QML - GridLayout - ROW 和 COLUMN Span - 理解

Question

我正在尝试学习 QML，目前我在理解 rowSpan 和 columnSpan 方面遇到了一些问题，如果这个问题对你们中的一些人来说可能听起来很愚蠢，那么很抱歉。

---

我学到的是：

如果我错了，请纠正我，但在GridLayout中应该是这样的：

• Layout.row——表示对象所在的行；
• Layout.column - 表示对象所在的列；
• Layout.rowSpan - 表示对象应该拉伸多少行；
• Layout.columnSpan - 指示对象应拉伸多少列；

---

我正在尝试做什么：

好吧，在这种情况下，我试图在这里重新创建这个布局

这种布局理论上应该具有以下特点：

• 实际的GridLayout应由24 列和9 行组成
• 红色形状应位于 -> col 0, row 1 -> colSpan 3, rowSpan 7
• 蓝色形状应位于 -> col 3, row 1 -> colSpan 8, rowSpan 1
• 紫色形状应位于 -> col 3, row 4 -> colSpan 6, rowSpan 3

或者至少到目前为止我是这么理解的。

---

问题：

在我用 col、row 以及 colSpan 和 rowSpan 编码 QML 后，我得到了这个。

---

我的代码：

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1

Item {
    width: 1366
    height: 512

    GridLayout {
        id: grid

        columns: 24
        rows: 9
        anchors.fill: parent

        Rectangle {

            property var rowSpan: 7
            property var columSpan: 3

            Layout.column: 0
            Layout.row: 1

            Layout.preferredWidth: (parent.width / parent.columns) * columSpan
            Layout.preferredHeight: (parent.height / parent.rows) * rowSpan

            Layout.columnSpan: columSpan
            Layout.rowSpan: rowSpan

            color: "red"

        }

        Rectangle {
            property var rowSpan: 1
            property var columSpan: 8

            Layout.column: 3
            Layout.row: 1

            Layout.preferredWidth: (parent.width / parent.columns) * columSpan
            Layout.preferredHeight: (parent.height / parent.rows) * rowSpan

            Layout.columnSpan: columSpan
            Layout.rowSpan: rowSpan

            color: "blue"
        }
        Rectangle {
            property var rowSpan: 3
            property var columSpan: 6

            Layout.column: 4
            Layout.row: 3

            Layout.preferredWidth: (parent.width / parent.columns) * columSpan
            Layout.preferredHeight: (parent.height / parent.rows) * rowSpan

            Layout.columnSpan: columSpan
            Layout.rowSpan: rowSpan

            color: "purple"
        }
    }
}

---

谁能向我解释我做错了什么或者GridLayout的哪一部分我没有做对？

Answer 1

您似乎想要使用 GridLayout ，就好像给定的空间被划分为给定的列/行数，并且每个单元格都是固定大小的。然而，GridLayout 背后的想法是，它根据单元格中项目的需要调整每一列和每一行。

因此，会发生的情况是，您将一些单元格留空，但是 GridLayout 将使这些行/列的高/宽为 0 像素，从而导致混乱的结果远远超出您的预期。

为了使 GridLayout 与您的设置配合得很好，您可以Item在中间放置空的，并设置与您的代码类似的preferredWidth/Height，从而导致一些未使用的 QML 和一段不可读的代码。

为了有更好的设置，您可以创建自己的布局项。以下应该有效：

import QtQuick 2.0
import QtQuick.Layouts 1.3

Item {
    id: layout

    property int columns: 1
    property int rows: 1

    onChildrenChanged: updatePreferredSizes()
    onWidthChanged: updatePreferredSizes()
    onHeightChanged: updatePreferredSizes()
    onColumnsChanged: updatePreferredSizes()
    onRowsChanged: updatePreferredSizes()

    function updatePreferredSizes()
    {
        if(layout.children.length === 0)
        {
            return
        }

        var cellWidth = layout.width / columns;
        var cellHeight = layout.height / rows;
        for(var i=0;i<layout.children.length;++i)
        {
            var obj = layout.children[i]

            var c = obj.Layout.column
            var r = obj.Layout.row
            var cs = obj.Layout.columnSpan
            var rs = obj.Layout.rowSpan

            obj.x = c * cellWidth;
            obj.y = r * cellHeight;
            obj.height = cs * cellHeight;
            obj.width = rs * cellWidth;
        }

    }
}

顺便说一句，你的主要代码可以简化为这样（MyGrid上面的 QML 在哪里）：

MyGrid {
    id: grid
    columns: 24
    rows: 9
    anchors.fill: parent

    Rectangle {
        Layout.column: 0
        Layout.row: 1
        Layout.columnSpan: 7
        Layout.rowSpan: 3

        color: "red"
    }

    Rectangle {
        Layout.column: 3
        Layout.row: 1
        Layout.columnSpan: 1
        Layout.rowSpan: 8

        color: "blue"
    }
    Rectangle {
        Layout.column: 4
        Layout.row: 3
        Layout.columnSpan: 3
        Layout.rowSpan: 6

        color: "purple"
    }
}