I have a cell object. And i need to create a Model including these cells.

Here's cell code. The Model must contain at least 20 cells?

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
                }
            }
        }
    }
}

CodePudding user response：

In the following, I declare a ListModel which has an objid parameter. I also declare a sampleData object where the same objid can be used as a key to access additional meta data.

    ListModel {
        id: sampleModel
        ListElement { objid: "obj1" }
        ListElement { objid: "obj2" }
        ListElement { objid: "obj3" }
    }

    property var sampleData: ({
        "obj1": { "bat": "63%", "fil": "100%" },
        "obj2": { "bat": "60%", "fil": "90%" },
        "obj3": { "bat": "59%", "fil": "80%" }
    })

To access the nested data in the delegate, I use:

    sampleData[objid].bat
    sampleData[objid].fil

The following has a small edit to your original delegate to show the nested metadata access and also includes the test GridView application.

import QtQuick
import QtQuick.Controls
Page {
    GridView {
        anchors.fill: parent
        model: sampleModel
        cellWidth: 300
        cellHeight: 300
        delegate: MyGridCell {
        }
    }

    ListModel {
        id: sampleModel
        ListElement { objid: "obj1" }
        ListElement { objid: "obj2" }
        ListElement { objid: "obj3" }
    }

    property var sampleData: ({
        "obj1": { "bat": "63%", "fil": "100%" },
        "obj2": { "bat": "60%", "fil": "90%" },
        "obj3": { "bat": "59%", "fil": "80%" }
    })
}

// MyGridCell.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Qt5Compat.GraphicalEffects
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: "Заряд: %1".arg(sampleData[objid].bat)
                    color: "white"
                    font.pixelSize: 14
                    leftPadding: 21
                }
            }
            Item {
                height: 17
                Image {
                    source: "qrc:/images/file.svg"
                    anchors.verticalCenter: parent.verticalCenter
                }
                Text {
                    text: "Файлы: %1".arg(sampleData[objid].fil)
                    color: "white"
                    font.pixelSize: 14
                    leftPadding: 21
                }
            }
        }
    }
}

You can Try it Online!