QML GridLayout中columnSpan与rowSpan的尺寸适配问题

你遇到的尺寸不一致问题，核心是没有明确指定每个元素在GridLayout中的行列位置，同时错误设置了Layout.preferredWidth/Layout.preferredHeight干扰了布局计算：

1. 仅设置rowSpan和columnSpan时，GridLayout会自动按顺序填充单元格，导致部分元素的实际位置与预期不符；
2. Layout.preferredWidth: modelData.columnSpan把优先宽度设为2，远小于窗口可分配空间，结合fillWidth: true时，布局会优先满足上层大元素的宽度需求，挤压下层元素的空间分配。

1. 给每个布局元素添加明确的row和column属性，指定其在GridLayout中的起始位置；
2. 删除干扰布局的Layout.preferredWidth和Layout.preferredHeight，让fillWidth/fillHeight配合GridLayout自动分配空间。

修复后的代码如下：

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.15

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("GridLayout")

    property var layoutStructure: [
        {index: 0, column:0, row:0, columnSpan:5, rowSpan:2},
        {index: 1, column:5, row:0, columnSpan:5, rowSpan:2},
        {index: 2, column:0, row:2, columnSpan:2, rowSpan:1},
        {index: 3, column:2, row:2, columnSpan:2, rowSpan:1},
        {index: 4, column:4, row:2, columnSpan:2, rowSpan:1},
        {index: 5, column:6, row:2, columnSpan:2, rowSpan:1},
        {index: 6, column:8, row:2, columnSpan:2, rowSpan:1},
        {index: 7, column:0, row:3, columnSpan:2, rowSpan:1},
        {index: 8, column:2, row:3, columnSpan:2, rowSpan:1},
        {index: 9, column:4, row:3, columnSpan:2, rowSpan:1},
        {index: 10, column:6, row:3, columnSpan:2, rowSpan:1},
        {index: 11, column:8, row:3, columnSpan:2, rowSpan:1}
    ]

    GridLayout
    {
        anchors.fill: parent
        rows: 4
        columns: 10
        columnSpacing: 0
        rowSpacing: 0

        Repeater
        {
            model: layoutStructure

            Rectangle
            {
                Layout.row: modelData.row
                Layout.column: modelData.column
                Layout.rowSpan: modelData.rowSpan
                Layout.columnSpan: modelData.columnSpan
                Layout.fillHeight: true
                Layout.fillWidth: true
                color: "red"
                border.width: 1

                Label
                {
                    text: index
                    anchors.centerIn: parent
                }
            }
        }
    }
}

GridLayout的自动填充逻辑在处理跨行列元素时容易出现位置偏差，显式指定row和column是确保布局符合预期的最可靠方式。同时，preferredWidth/preferredHeight应设置为合理的实际尺寸（比如基于窗口比例），而非直接使用span的数值，避免干扰布局的空间分配。

内容的提问来源于stack exchange，提问作者Ali