Problem with Mouse click inside ListView

[Vinoth Rajendran4]

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

Created a simple app as below,

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!

[eyllanesc]

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

[Vinoth Rajendran4]

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

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

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

[eyllanesc]

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

[Vinoth Rajendran4]

@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