Qt QML GridLayout中Layout.columnSpan异常，如何实现1:3列占比？

你提到的代码中Layout.columnSpan: index % 0 == 0 ? 1 : 3存在除数为0的语法错误，同时需要调整布局逻辑确保标题与数据行对齐。以下是修正后的完整代码：

import QtQuick 2.15
import QtQuick.Layouts

Item {
    id: container
    anchors.fill: parent

    Rectangle {
        anchors.fill: parent
        color: "grey"

        Rectangle {
            anchors.fill: parent
            anchors.margins: 10
            color: "transparent"

            GridLayout {
                width: parent.width
                // 可选：改为implicitHeight让高度自适应内容
                height: 200
                columnSpacing: 5
                rowSpacing: 5

                rows: 6
                columns: 4

                Repeater {
                    model: ["line 1:", "data 1",
                        "line 2:", "data 2",
                        "line 3:", "data 3",
                        "line 4:", "data 4",
                        "line 5:", "data 5",
                        "line 6:", "data 6"
                    ]

                    delegate: Item {
                        Layout.fillWidth: true
                        Layout.fillHeight: true
                        Layout.alignment: Qt.AlignTop
                        // 指定当前元素所在行，确保标题和数据成对在同一行
                        Layout.row: Math.floor(index / 2)
                        // 修正奇偶判断逻辑，标题列span=1，数据列span=3
                        Layout.columnSpan: index % 2 == 0 ? 1 : 3

                        Rectangle {
                            width: parent.width
                            height: 30
                            color: "red"

                            Text {
                                anchors.fill: parent
                                horizontalAlignment: Text.AlignLeft
                                verticalAlignment: Text.AlignVCenter
                                text: modelData
                            }
                        }
                    }
                }
            }
        }
    }
}

关键修正点说明： #

• 语法错误修复：将index % 0改为index % 2，通过索引奇偶性区分标题（偶数索引）和数据（奇数索引），分别设置对应的列跨度。
• 行号绑定：添加Layout.row: Math.floor(index / 2)，让每一组标题和数据元素处于同一行，避免自动排列时出现布局错位。
• 宽度比例保证：GridLayout设置columns:4，span=1的标题列占1/4宽度，span=3的数据列占3/4宽度，刚好满足1:3的占比需求。

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