Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. How can I create a dynamic delegate in QML?
Forum Updated to NodeBB v4.3 + New Features

How can I create a dynamic delegate in QML?

Scheduled Pinned Locked Moved Solved QML and Qt Quick
5 Posts 3 Posters 659 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • P Offline
    P Offline
    pnonell
    wrote on last edited by
    #1

    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-worxR 1 Reply Last reply
    0
    • P 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-worxR Offline
      raven-worxR Offline
      raven-worx
      Moderators
      wrote on last edited by
      #2

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

      --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
      If you have a question please use the forum so others can benefit from the solution in the future

      P 1 Reply Last reply
      2
      • fcarneyF Offline
        fcarneyF Offline
        fcarney
        wrote on last edited by
        #3

        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.

        C++ is a perfectly valid school of magic.

        1 Reply Last reply
        1
        • raven-worxR 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.

          P Offline
          P Offline
          pnonell
          wrote on last edited by
          #4

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

          1 Reply Last reply
          0
          • P Offline
            P Offline
            pnonell
            wrote on last edited by
            #5

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

            1 Reply Last reply
            1

            • Login

            • Login or register to search.
            • First post
              Last post
            0
            • Categories
            • Recent
            • Tags
            • Popular
            • Users
            • Groups
            • Search
            • Get Qt Extensions
            • Unsolved