Unsolved How to buid "Mouse click event" on the ListElement, ListView, ListModel
-
Good evening every one! I'm Vu and I'm VietNammese. I'm newbie only, i learning QML languages and i hope you help me to solve my problem.
Today i read a topic which talks about" SmartHome" wrote by BasysKom( the link in below)http://share.basyskom.com/demos/smarthome_src.tar.gz
To run the program, you must to coppy folder" qml" from folder smarthome to folder which it's made after you build by QT, in my computer folder name"
build-smarthome-Desktop_Qt_5_7_0_GCC_64bit-Debug"
In case, i don't know how to change icon property of"ListElement", when Click on ListElement, QML will call C++ function And C++ function will call back QML to change ListElement icon turns light or turns off, code about ListElement:
Item { id: turnLight property alias lightModel: light property alias heatingModel: heating property alias blindModel: blind property alias windowModel: window /** * A model for all lights in the house that can be controlled */ ListModel { id: light ListElement { name: "Bedroom" iconOn: "pics/icons/light_on.png" iconOff: "pics/icons/light_off.png" on: true startTimeHours: 7 endTimeHours: 14 startTimeMinutes: 00 endTimeMinutes: 45 lowestLux1: 50 } ListElement { name: "Hall" iconOn: "pics/icons/light_on.png" iconOff: "pics/icons/light_off.png" on: false startTimeHours: 7 endTimeHours: 8 startTimeMinutes: 00 endTimeMinutes: 45 lowestLux: 50 } ListElement { name: "Bathroom" iconOn: "pics/icons/light_on.png" iconOff: "pics/icons/light_off.png" on: false startTimeHours: 6 endTimeHours: 18 startTimeMinutes: 00 endTimeMinutes: 45 lowestLux: 4 } }
my pictuture example:
http://s44.photobucket.com/user/VuDang2/media/Screenshot%20from%202017-02-18%2022-51-11_zpsbxcd0crh.png.html
when i click to the" Bedroom" which i want to turns off icon!
when i click to the" Hall" which i want to turns on icon! thanks for read! -
Do you want to replace this item iconOn: "pics/icons/light_on.png" ?
You can look at Qt Documentation ListModel setProperty function. It can be something like following
light.setProperty(1,"iconOn","pics/icons/light_on.png")
-
@dheerendra said in How to change a Icon of ListView, ListModel?:
light.setProperty(1,"iconOn","pics/icons/light_on.png")
thanks for your reply, it's good working....Beside i want to click on the ListElemt which it's will call C++ function( simily "onClick" of "MouseArea"). The focus of the article about" how to buid "Mouse click event" on the ListElement, ListView! Thanks
-
@Dang-Vu
ListElement
is part of model. Models just hold the data. Thus it does not deal with such events. It can only be done in delegates. So you need to add aMouseArea
inside your delegate and capture mouse click events. -
In addition to prevpost list model is non visual entity. So mousearea is applicable to visual entity. So as suggested by previous post work with delegates to make your use cas work
-
@p3c0 it's you means like here:
ListModel { id: light ListElement { name: "Bedroom" iconOn: "pics/icons/light_on.png" iconOff: "pics/icons/light_off.png" on: true startTimeHours: 7 endTimeHours: 14 startTimeMinutes: 00 endTimeMinutes: 45 lowestLux1: 50 delegate: Component { Rectangle { x: 350 y: 350 width: 100 height: 50 Text { text: name ; anchors.centerIn: parent } MouseArea { anchors.fill: parent onClicked: console.log("sadfasd") } } } } }
But i encountered error:
ListElement: cannot contain nested elements delegate: Component ^
you can help me fix it?
-
Delegate is not a property of listmodel. Move the delegate code to listview. Please look at list view documentation. It has nIce example of how do u associate listview, model and delegate. That example should help you on where to place delegate.