Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Problem with Mouse click inside ListView



  • Hi All,
    I am learning ListView and i am facing an issue.

    Created a simple app as below,App.png

    My Issue:
    When i click on first item("Vinoth"), no mouse handling occurs
    But when 2nd and 3rd item are clicked, Mouse handling occurs and i can see the output in Application Window (console output).

    I need to know why Mouse handling not occuring for first item in my App. Please help understand me and if correction required in my logic, please point it to me.

    import QtQuick 2.0
    import QtQuick.Window 2.2
    
    Window {
        id: rootW
    
        visible: true
        width: 500
        height: 500
    
        ListView {
            id: listView
    
            anchors.fill: parent
            model: listModel
            delegate : listDelegate
            header: listHeader
            footer: listFooter
    
            highlight: Rectangle {
                width: parent.width
                height: 30
                color: "green"
            }
    
            ListModel {
                id: listModel
                ListElement {name : "Vinoth"}
                ListElement {name : "Amsa"}
                ListElement {name : "Angu"}
            }
    
            Component {
                id: listDelegate
    
                Column {
                    width: parent.width
                    height: 30
                    Text {
                        id: listText
                        text: name
                        font.pixelSize: 24
                    }
    
                    MouseArea {
                        width: parent.width
                        height: parent.height
                        onClicked: {
                            console.log("Clicked")
                        }
                    }
                }
            }
    
            Component {
                id: listHeader
                Rectangle {
                    width: parent.width
                    height: 30
                    gradient: headerGradient
                    border { color: "black"; width: 2}
                    Text {
                        text: "Family Tree"
                        anchors.centerIn: parent
                        font.pixelSize: 24
                    }
                }
            }
    
            Component {
                id: listFooter
                Rectangle {
                    width: parent.width
                    height: 2
                    border {color: "black"; width:1}
                }
            }
    
            Gradient {
                id: headerGradient
                GradientStop { position: 0.0; color: "#8EE2FE"}
                GradientStop { position: 0.66; color: "#7ED2EE"}
            }
        }
    }
    
    

    Thanks in Advance!



  • The objective of the Column item is to position the items vertically, so with the following code:

    Column {
        width: parent.width
        height: 30
        Text {
             id: listText
             text: name
             font.pixelSize: 24
         }
    
         MouseArea {
             width: parent.width
             height: parent.height
             onClicked: {  console.log("Clicked") }
          }
    }
    

    You are indicating that the item Text and the item MouseArea vertically. Doesn't that contradict your objective? Yes, since you want to get the clicked in the area that the Text item occupies.

    In conclusion, it is not necessary to use Column but you must use Item:

            Component {
                id: listDelegate
    
                Item {
                    width: parent.width
                    height: 30
                    Text {
                        id: listText
                        text: name
                        font.pixelSize: 24
                    }
    
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            console.log("Clicked")
                        }
                    }
                }
            }
    


  • @eyllanesc , I got it now... Thanks for the reply.

    I have further doubt on this ,

    When using Item instead of Column things are fine as seen in screenshotItem.png

    But when Rectangle is used instead of Item, highlight gets disappeared. rectangle.png

    Can you please help clarify why Highlight gets disappeared when Rectangle is used



  • @Vinoth-Rajendran4 The item of the "highlight" is below the delegate so when using Rectangle instead of Item it is hidden.



  • @eyllanesc , I learned some difference between Rectangle and Item now.. Thanks to you.

    This link was useful for finding z order used in ListView. https://doc.qt.io/qt-5/qml-qtquick-listview.html#stacking-order-in-listview


Log in to reply