QML-GridLayout-ROW和COLUMN跨度-理解

Question

[我正在尝试学习QML，目前我在理解rowSpan和columnSpan时遇到了一些问题，如果您对某些人来说这听起来很愚蠢，请您抱歉。

---

我学到的东西：

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

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

---

我想做的事情：

嗯，在这种情况下，我正在尝试在此处重新创建此布局

理论上，此布局应具有以下内容：

• 实际的GridLayout应该由24列和9行
组成
• RED形状应位于-> col 0，第1行-> colSpan 3，rowSpan 7
• BLUE形状应位于-> col 3，第1行-> colSpan 8，rowSpan 1
• PURPLE形状应位于-> col 3，第4行-> colSpan 6，rowSpan 3

或者至少这是我到目前为止所了解的。

---

问题：

[我用col，一致地行，以及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"
    }
}