Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

How can I create a dynamic delegate in QML?



  • 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!


  • Moderators

    @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.


  • Moderators

    @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.



  • 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.



  • @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!



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


Log in to reply