How can I create a dynamic delegate in QML? - qt

Question

I want to create a view using ListView, where each row will have Rectangle elements defined by a model. Each element of the model represents a row, but these elements may have more than one Rectangle to draw, defined in a role with an array named blocs.
I don't know how to define the delegate to create the number of Rectangles defined in the model for each row of the ListView. I want each bloc to be independent from the others, so in the future I can make them draggable and resizeable.
This is my BlocModel.qml:
import QtQuick 2.0
ListModel {
ListElement{
blocs: [
ListElement{
OriginX: 100
length: 100
color: "blue"
},
ListElement{
OriginX: 300
length: 75
color: "green"
}
]
}
ListElement{
blocs: [
ListElement{
OriginX: 0
length: 50
color: "red"
},
ListElement{
OriginX: 100
length: 75
color: "yellow"
}
,
ListElement{
OriginX: 300
length: 100
color: "blue"
}
]
}
}
This is the main.qml:
import QtQuick 2.11
import QtQuick.Controls 2.4
import QtQuick.Controls.Material 2.4
import QtQuick.Layouts 1.11
import QtQuick.Window 2.11
ApplicationWindow {
id: window
width: 400
height: 500
visible: true
ListView {
id: blocsListView
anchors.fill: parent
model: BlocModel {}
delegate: BlocDelegate {}
}
}
And this the BlocDelegate.qml:
import QtQuick 2.12
import QtQuick.Controls 2.4
import QtQuick.Controls.Material 2.4
import QtQuick.Layouts 1.11
import QtQuick.Window 2.11
ItemDelegate{
id: root
width: parent.width
height: 50
//each row
Rectangle{
width: parent.width
height: parent.height
color: "gray"
//What should I add here to make the following element repeat according to the number of elements in the array "blocs"?
//each bloc should have the following delegate
/* Rectangle {
id: bloc
x: OriginX
width: length
height: parent.height
color: model.color
}*/
}
}
How can I make my delegate dynamic? Can I use somehow a Javascript for loop or should I use a C++ model and add the blocs from there?
Thanks!

Answer 1

A simple solution that may fit your requirement if all your delegate items are the same type(In this case only rectangle). If you are having delegate items of different types (Rectangle, Item, Button, RadioButton) you have to load the predefined items with matching types into a loader.
=========BlocDelegate.qml=======
import QtQuick 2.9
import QtQuick.Controls 2.2
Column {
width: parent.width
Repeater {
model: blocs
delegate: Rectangle {
height: 40
width: parent.width
color: rectcolor
}
}
}
========BlocModel.qml========
import QtQuick 2.0
ListModel {
ListElement {
blocs: [
ListElement {
rectcolor: "lightgreen"
},
ListElement {
rectcolor: "skyblue"
},
ListElement {
rectcolor: "orange"
}
]
}
ListElement {
blocs: [
ListElement {
rectcolor: "yellow"
},
ListElement {
rectcolor: "steelblue"
}
]
}
}