Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Update: Forum Guidelines & Code of Conduct

    Solved ListView, model delegate implementation

    QML and Qt Quick
    2
    8
    527
    Loading More Posts
    • 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.
    • D
      DavidM29 last edited by

      Hello,

      I'm trying to implement a List view but I'm not sure to really understand the Model Delegate system.

      I want to create a line of the same picture.
      For example :
      0_1530610550334_610848da-fca4-4527-95c9-27426fe12523-image.png

      I want to keep control on every one of the image (change the visibility of each one independently)

      Here is the code I tried :

          Rectangle{
              width: parent.width
              height: 40
              anchors.top: meter.bottom
              anchors.horizontalCenter: parent.horizontalCenter
      
              ListModel {
                  id: tronconModel
                  ListElement{
                  }
                  ListElement{
                  }
                  ListElement{
                  }
                  ListElement{
                  }
      
              }
      
              Component{
                  id : tronconDelegate
                  Drop{
                      width: parent.width
                      height: width
                  }
              }
      
              ListView{
                  id: listView
                  anchors.fill: parent
                  model: tronconModel
                  delegate: tronconDelegate
                  orientation: Qt.Horizontal
                  layoutDirection: Qt.LeftToRight
              }
          }
      

      I tought it would create me 4 item from my delegate but it does not. I don't have any variable to give to my delegate. Maybe it is not the good way to do this kind of things.
      Can you maybe explain me a bit more on the Model Delegate system and guide me to the right solution ?

      Thank you in advance.

      1 Reply Last reply Reply Quote 0
      • ODБOï
        ODБOï last edited by ODБOï

        Hi @DavidM29,

        If your only need is to display images in row and just interact with, you don't really need a listview , you can use Row, Repeater, Image for exemple.
        See this for good understanding of Models/Views in qt : http://doc.qt.io/qt-5/qtquick-modelviewsdata-modelview.html

        your exemple :

        Window {
            id: window
            visible: true
            width: 720
            height: 430
           
            ListModel {
                id: tronconModel
                ListElement{
                    name :"1"
                }
                ListElement{
                    name :"2"
                }
                ListElement{
                    name :"3"
                }
                ListElement{
                    name :"4"
                }
        
            }
                function doOtherActions(it){
                    console.log(it)
                    it.opacity = 0.2
                }
        
                  ListView{
                      id: listView
                      height: 60
                      width: parent.width
                      model: tronconModel
                      delegate: Image {
                          id: im
                          source: "GUI/img/close_red.png"
                          MouseArea{
                            anchors.fill: parent
                            onClicked:{
                                im.opacity===1?im.opacity=0:im.opacity=1
                            }
                            onPressAndHold: doOtherActions(im)
                          }
                      }
                      orientation: Qt.Horizontal
                      layoutDirection: Qt.LeftToRight
                  }
        }
        
        
        D 1 Reply Last reply Reply Quote 3
        • D
          DavidM29 @ODБOï last edited by DavidM29

          @LeLev
          Thank you very much it is what I need !
          Is there any way to make a loop to create all the list element instead of declaring them one by one ?

          Edit :
          I found a way by using this line in the ListView :

          model: 10 
          

          But I'm not sure it is the best way to do it if I want to find where the action is coming from when I click on one of them or if I want to change the states of a specific image.

          1 Reply Last reply Reply Quote 0
          • ODБOï
            ODБOï last edited by

            Is there any way to make a loop to create all the list element instead of declaring them one by one ?

            Yes, ther is append(jsobject o) js function for exemple, see this : http://doc.qt.io/qt-5/qml-qtqml-models-listmodel.html#append-method
            However creating your list elements within a loop will probably block your GUI, so see this for this : http://doc.qt.io/qt-5/qtquick-threading-example.html

            @DavidM29 said in ListView, model delegate implementation:

            I found a way by using this line in the ListView :
            model: 10

            If you don't need your ListModel, yes, you can put 'model:10' ..
            I'm not sure i fully understand what are you doing precisely.

            1 Reply Last reply Reply Quote 0
            • D
              DavidM29 last edited by

              To give you an example of what I want to do lets imagine I want to irrigate a line of 40 trees this is command with a computer and I want to show a graphical feed back to the user and interact with the irrigation system. Meens that I can irrigate or stop to irrigate the tree by pressing the image or it is also capable to follow an auto irrigation mode wich will change the state of each image automatically.

              Not sure it is better for you to understood, I tried to find a quite simple example.

              ODБOï 1 Reply Last reply Reply Quote 0
              • ODБOï
                ODБOï @DavidM29 last edited by

                @DavidM29 I believe you don't need that ListModel as your model, just put 40 as your trees count.

                I don'k know how you will communicate wit your irrigation system but, when you click one of your buttons you can catch the clicked index to identify witch button is clicked

                Window {
                    id: window
                    visible: true
                    width: 720
                    height: 430
                
                        function doOtherActions(it,ind){
                            console.log(ind)
                          //  IRRIGATION_SYS.IRRIGATE(tree[ind])   something like this maybe ?
                            it.opacity = 0.2
                        }
                
                          ListView{
                              id: listView
                                 anchors.fill: parent
                              model: 40
                              delegate: Image {
                                  id: im
                                  source: "GUI/img/close_red.png"
                                  MouseArea{
                                    anchors.fill: parent
                                    onClicked:{
                                        im.opacity===1?im.opacity=0:im.opacity=1
                                    }
                                    onPressAndHold: doOtherActions(im,index)
                                  }
                              }
                              orientation: Qt.Horizontal
                              layoutDirection: Qt.LeftToRight
                          }
                }
                
                D 1 Reply Last reply Reply Quote 1
                • D
                  DavidM29 @ODБOï last edited by

                  @LeLev

                  Thank you very much !
                  The tree was just an example the real case will communicate via CAN bus but it will be part of my C++ side.

                  ODБOï 1 Reply Last reply Reply Quote 0
                  • ODБOï
                    ODБOï @DavidM29 last edited by

                    @DavidM29 Nice ;) you are welcome

                    1 Reply Last reply Reply Quote 0
                    • First post
                      Last post