ListModel containing data property of delegate

Question

is it possible to create a GridView in qml which its childs defined in model, so i can have a complete dynamic child view for my GridView items, for example i want to have 10 different rectangle defined in model to be data of my delegate.
for this ,i want to create a GridView and set delegate's data property from model

GridView {
    model: ListModel{
        ListElement{
            childs:Item{ 
                // data is a list<Object> , so item here is wrong
                //this part is wrong i am looking for correct way of doing this
                //error : cannot contain nested elements 
                Button{

                }
                Button{

                }
            }
        }
    }

    delegate: Rectangle{
        data:childs
    }
}

this code explains logic of my question. but its not correct.
my model items will be inside rectangle but its childs are completly dynamic it could be 100 items which i dont know about them.
or another approach to ask this question is "Can i have a Component inside ListModel?"
update
so if i want to use this it will end up like this "lets say file name is MyWidget" :

MyWidget{
    model:ListModel{
       //and here we go how can i set data of GridView's delegate
    }

}

I guess you don't want only Rectangle, since then you could just encapsulate the properties in the ListModel instead of the Rectangles themself? — Amfasis
@Amfasis think of it as a GridView of Cards which content of Cards are dynamic — Mahdi Khalili
Ok, I see. Maybe you want to try this approach: forum.qt.io/topic/80826/dynamic-delegate-in-repeater/4 — Amfasis
@Amfasis if i use loader then i should define component for every childs , which is not dynamic , as i understand from this solution — Mahdi Khalili
So, where does your model come from, who populates it? If like in your example it's from QML then I personally don't see a difference, but if it's from C++ it's a different story, but in that case you could create the components themself (see forum.qt.io/topic/42087/…) — Amfasis

Amfasis Amfasis · Accepted Answer · 2019-07-30T06:38:40

I just stumbled upon the ObjectModel defined in QtQml.Models (through another StackOverflow question posted today). I had some try and came up with this solution, which is not ideal, but would get you a fair amount of what you want, I think.

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQml.Models 2.3

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

    ObjectModel {
        id: obj_model
        Rectangle {
            width: 10
            height: 10
            color: "#00ffff"
        }
        Rectangle {
            width: 10
            height: 10
            color: "#ff00ff"
        }
    }

    GridView {
        anchors.fill: parent
        model: grid2.count

        delegate: Rectangle {
            x: 5
            y: 5
            height: 90
            width: 90
            color: "red"
        }
    }

    GridView {
        id: grid2
        anchors.fill: parent
        model: obj_model
    }
}

This works because the GridView's have the same cellHeight and cellWidth (implicitly, you can tie them together) and are positioned the same.

This can't be perfect since the ObjectModel stops the usage of the delegate in grid2 (Which was also the answer on the before-mentioned SO-question)

ListModel containing data property of delegate

1 Answers