ListView, model delegate implementation

[DavidM29]

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 :

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.

[LeLev]

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

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

[LeLev]

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.

[DavidM29]

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.

[LeLev]

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

[DavidM29]

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

[LeLev]

@DavidM29 Nice ;) you are welcome