如何在QML Qt中创建含自定义嵌套单元格的GridModel？

我有一个自定义单元格对象，需要创建一个包含该单元格的网格模型（GridModel），且模型中至少包含20个该单元格实例。以下是该单元格的QML代码：

Rectangle {
    width: 270
    height: 277
    color: "#333333"
    radius: 8

    Rectangle {
        z: 10
        height: 32
        width: 77
        color: "#333333"
        radius: 8
        y: 8
        x: 8

        Button {
            height: 32
            width: 77
            background: btnColor1
        }

        Text {
            text: "DMT 10"
            color: "white"
            font.pixelSize: 12
            anchors.centerIn: parent
        }
    }

    Item {
        height: 154
        width: 270

        Image {
            source: "qrc:/images/cellimage.png"
            id: imageOriginal
            visible: false
            anchors.fill: parent
        }

        Rectangle {
            id: rectangleMask
            anchors.fill: parent
            radius: 8
            visible: false
        }

        OpacityMask {
            id: opacityMask
            anchors.fill: imageOriginal
            source: imageOriginal
            maskSource: rectangleMask
        }
    }

    Rectangle {
        y: 149
        width: 270
        height: 120
        color: '#333333'

        ColumnLayout {
            x: 17
            y: 15
            spacing: 8

            Item {
                height: 17

                Image {
                    source: "qrc:/images/person.svg"
                    anchors.verticalCenter: parent.verticalCenter
                }

                Text {
                    text: "Cерийный номер:"
                    color: "white"
                    font.pixelSize: 14
                    leftPadding: 21
                }
            }

            Item {
                height: 17

                Image {
                    source: "qrc:/images/baterry.svg"
                    anchors.verticalCenter: parent.verticalCenter
                }

                Text {
                    text: "Заряд: 63%"
                    color: "white"
                    font.pixelSize: 14
                    leftPadding: 21
                }
            }

            Item {
                height: 17

                Image {
                    source: "qrc:/images/file.svg"
                    anchors.verticalCenter: parent.verticalCenter
                }

                Text {
                    text: "Файлы: 100%"
                    color: "white"
                    font.pixelSize: 14
                    leftPadding: 21
                }
            }
        }
    }
}

1. 封装自定义单元格为独立组件 #

将原单元格代码保存为CustomCell.qml，并把静态文本改为可绑定的属性，支持从模型获取动态数据：

// CustomCell.qml
Rectangle {
    width: 270
    height: 277
    color: "#333333"
    radius: 8

    // 定义可绑定属性，接收模型传递的数据
    property string deviceId: "DMT 10"
    property string serialNumber: ""
    property int batteryLevel: 63
    property int fileUsage: 100

    Rectangle {
        z: 10
        height: 32
        width: 77
        color: "#333333"
        radius: 8
        y: 8
        x: 8

        Button {
            height: 32
            width: 77
            background: btnColor1
        }

        Text {
            text: deviceId
            color: "white"
            font.pixelSize: 12
            anchors.centerIn: parent
        }
    }

    Item {
        height: 154
        width: 270

        Image {
            source: "qrc:/images/cellimage.png"
            id: imageOriginal
            visible: false
            anchors.fill: parent
        }

        Rectangle {
            id: rectangleMask
            anchors.fill: parent
            radius: 8
            visible: false
        }

        OpacityMask {
            id: opacityMask
            anchors.fill: imageOriginal
            source: imageOriginal
            maskSource: rectangleMask
        }
    }

    Rectangle {
        y: 149
        width: 270
        height: 120
        color: '#333333'

        ColumnLayout {
            x: 17
            y: 15
            spacing: 8

            Item {
                height: 17

                Image {
                    source: "qrc:/images/person.svg"
                    anchors.verticalCenter: parent.verticalCenter
                }

                Text {
                    text: "序列号: " + serialNumber
                    color: "white"
                    font.pixelSize: 14
                    leftPadding: 21
                }
            }

            Item {
                height: 17

                Image {
                    source: "qrc:/images/baterry.svg"
                    anchors.verticalCenter: parent.verticalCenter
                }

                Text {
                    text: "电量: " + batteryLevel + "%"
                    color: "white"
                    font.pixelSize: 14
                    leftPadding: 21
                }
            }

            Item {
                height: 17

                Image {
                    source: "qrc:/images/file.svg"
                    anchors.verticalCenter: parent.verticalCenter
                }

                Text {
                    text: "文件占用: " + fileUsage + "%"
                    color: "white"
                    font.pixelSize: 14
                    leftPadding: 21
                }
            }
        }
    }
}

2. 创建主页面实现网格布局 #

在主QML文件中，用ListModel生成至少20条数据，通过GridView渲染所有单元格：

// Main.qml
import QtQuick 2.15
import QtQuick.Layouts 1.15

Rectangle {
    width: 1200
    height: 800
    color: "#222222"

    ListModel {
        id: cellModel
        // 生成25个单元格数据，满足最少20个实例要求
        Component.onCompleted: {
            for (let i = 1; i <= 25; i++) {
                append({
                    deviceId: "DMT " + i,
                    serialNumber: "SN-" + String(i).padStart(4, "0"),
                    batteryLevel: Math.floor(Math.random() * 40) + 60, // 60-100%随机电量
                    fileUsage: Math.floor(Math.random() * 30) + 70 // 70-100%随机文件占用
                })
            }
        }
    }

    GridView {
        anchors.fill: parent
        anchors.margins: 20
        cellWidth: 270 + 10 // 单元格宽度+间距
        cellHeight: 277 + 10 // 单元格高度+间距
        model: cellModel

        delegate: CustomCell {
            deviceId: model.deviceId
            serialNumber: model.serialNumber
            batteryLevel: model.batteryLevel
            fileUsage: model.fileUsage
        }
    }
}

关键说明 #

• ListModel通过循环生成批量数据，每个数据项对应一个单元格的动态内容
• GridView自动排列单元格，通过cellWidth和cellHeight控制网格间距
• 自定义单元格的属性与模型数据绑定，实现每个单元格展示不同的设备信息

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