Solved Problem with Mouse click inside ListView
-
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!
-
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 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
-
@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