Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Problem with Mouse click inside ListView
Forum Updated to NodeBB v4.3 + New Features

Problem with Mouse click inside ListView

Scheduled Pinned Locked Moved Solved QML and Qt Quick
5 Posts 2 Posters 716 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • V Offline
    V Offline
    Vinoth Rajendran4
    wrote on last edited by
    #1

    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!

    1 Reply Last reply
    0
    • eyllanescE Offline
      eyllanescE Offline
      eyllanesc
      wrote on last edited by eyllanesc
      #2

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

      If you want me to help you develop some work then you can write to my email: e.yllanescucho@gmal.com.

      V 1 Reply Last reply
      1
      • eyllanescE 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")
                            }
                        }
                    }
                }
        
        V Offline
        V Offline
        Vinoth Rajendran4
        wrote on last edited by
        #3

        @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

        1 Reply Last reply
        0
        • eyllanescE Offline
          eyllanescE Offline
          eyllanesc
          wrote on last edited by
          #4

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

          If you want me to help you develop some work then you can write to my email: e.yllanescucho@gmal.com.

          V 1 Reply Last reply
          1
          • eyllanescE eyllanesc

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

            V Offline
            V Offline
            Vinoth Rajendran4
            wrote on last edited by Vinoth Rajendran4
            #5

            @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

            1 Reply Last reply
            0

            • Login

            • Login or register to search.
            • First post
              Last post
            0
            • Categories
            • Recent
            • Tags
            • Popular
            • Users
            • Groups
            • Search
            • Get Qt Extensions
            • Unsolved