如何使不同的cellWidth和cellHeight的GridView

Question

我有一个包含计数数字的模型。我想显示给定布局中的mdeol数据。请找到附件图片。

Answer 1

您可以使用GridLayout将项目跨多个行/列

import QtQuick 2.0
import QtQuick.Layouts 1.3

GridLayout {
    columnSpacing: 10
    rowSpacing: 10
    columns: 4

    Repeater {

        model: ListModel {
            ListElement { colSpan: 2; rowSpan: 3 }
            ListElement { colSpan: 1; rowSpan: 1 }
            ListElement { colSpan: 1; rowSpan: 1 }
            ListElement { colSpan: 1; rowSpan: 1 }
            ListElement { colSpan: 1; rowSpan: 1 }
            ListElement { colSpan: 1; rowSpan: 1 }
            ListElement { colSpan: 1; rowSpan: 1 }

            ListElement { colSpan: 1; rowSpan: 1 }
            ListElement { colSpan: 1; rowSpan: 1 }
            ListElement { colSpan: 2; rowSpan: 3 }
            ListElement { colSpan: 1; rowSpan: 1 }
            ListElement { colSpan: 1; rowSpan: 1 }
            ListElement { colSpan: 1; rowSpan: 1 }
            ListElement { colSpan: 1; rowSpan: 1 }
        }

        Rectangle {
            Layout.columnSpan: model.colSpan
            Layout.rowSpan: model.rowSpan
            Layout.fillHeight: true
            Layout.fillWidth: true

            color: "red"

            Text {
                anchors.fill: parent
                text: index
                horizontalAlignment: Qt.AlignHCenter
                verticalAlignment: Qt.AlignVCenter
            }
        }

    }
}