时间戳

首页 > 解决方案 > QML - GridLayout - ROW 和 COLUMN Span - 理解

qt - QML - GridLayout - ROW 和 COLUMN Span - 理解

问题描述

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

我学到的是：

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

我正在尝试做的事情：

好吧，在这种情况下，我正在尝试在此处重新创建此布局 在此处输入图像描述

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

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

问题：

在我用 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的哪一部分我没有做对？

标签： qtqmlgrid-layoutqqmlcomponent

解决方案

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

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

为了使 GridLayout 与您的设置相得益彰，您可以Item在两者之间放置 empty ，并设置与您的代码类似的 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"
    }
}

推荐阅读