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 :
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.htmlyour 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: 10If 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 } }