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


  • Moderators

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


Log in to reply
 

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