How can I create a dynamic delegate in QML?

pnonell

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!

raven-worx

@pnonell said in How can I create a dynamic delegate in QML?:

//What should I add here to make the following element repeat according to the number of elements in the array "blocs"?

Repeater element in a appropriate layout or manually position the rect.

fcarney

First you need to determine if the "blocs" property is available to your delegate.

IF it is then you can just use either another ListView (or any widget that accepts a list) with appropriate delegates for each of those.

pnonell

@raven-worx if it's using the Repeater is there any layout that doesn't anchor its elements to the others? (I want the Rectangles to be independent and define position through their properties and not just put one next to the other.) If it's with manually position, is better to do it with javascript or c++? Thanks!

pnonell

Solved! I used a Repeater inside the delegate with model: blocs.