ListView, model delegate implementation



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



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


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



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



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



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


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



  • @DavidM29 Nice ;) you are welcome


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.