QML

Question

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

我学到了什么：

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

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

我想做什么：

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

这个布局，理论上应该有以下几点：

实际的GridLayout应该由24列和9行[=组成66=]
RED 形状应该在 -> col 0, row 1 -> colSpan 3, rowSpan 7
BLUE 形状应该在 -> col 3, row 1 -> colSpan 8, rowSpan 1
PURPLE 形状应该在 -> 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，就好像给定的 space 被分成给定的 column/row 计数并且每个单元格都是固定大小。然而，GridLayout 背后的想法是它根据单元格中项目的需要调整每一列和每一行。

所以发生的事情是您将一些单元格留空，但是 GridLayout 会使这些 rows/columns 0 像素 high/wide，导致与您的预期相去甚远的混乱结果。

为了使 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"
    }
}

QML - GridLayout - ROW 和 COLUMN Span - 理解

QML - GridLayout - ROW and COLUMN Span - Understanding

qt

grid-layout

qqmlcomponent