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. MouseArea moves under cursor position
Forum Updated to NodeBB v4.3 + New Features

MouseArea moves under cursor position

Scheduled Pinned Locked Moved QML and Qt Quick
containsmouselistviewmouseareamoving
4 Posts 2 Posters 2.3k Views 2 Watching
  • 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.
  • M Offline
    M Offline
    maxsivkov
    wrote on last edited by p3c0
    #1

    Hello

    http://doc.qt.io/qt-5/qml-qtquick-mousearea.html#containsMouse-prop
    Stays that
    Warning: This property is not updated if the area moves under the mouse: containsMouse will not change.

    I faced this problem with following code:

    -------------- DemoView.qml --------------

    import QtQuick 2.0
    
    Rectangle {
        width: 150
        height: 150
    
        color: "gray"
        ListModel {
            id: lmodel
            ListElement {
                name: "Sample Value 1"
            }
            ListElement {
                name: "Sample Value 2"
            }
            ListElement {
                name: "Sample Value 3"
            }
            ListElement {
                name: "Sample Value 4"
            }
            ListElement {
                name: "Sample Value 5"
            }
            ListElement {
                name: "Sample Value 6"
            }
            ListElement {
                name: "Sample Value 7"
            }
            ListElement {
                name: "Sample Value 8"
            }
            ListElement {
                name: "Sample Value 9"
            }
            ListElement {
                name: "Sample Value10"
            }
            ListElement {
                name: "Sample Value11"
            }
            ListElement {
                name: "Sample Value12"
            }
    
        }
        Text {
            id: underCursorText
            height: 30
            width: parent.width
            anchors.top: parent.top
            anchors.left: parent.left
            text: "under cursor: " + lv.currentlyUnderCursor
        }
        ListView {
            anchors.top: underCursorText.bottom
            anchors.left: parent.left
            anchors.bottom: parent.bottom
            anchors.right: parent.right
            property string currentlyUnderCursor : ""
            id: lv
            clip: true
            model: lmodel
            delegate: Rectangle {
                height: 30
                width: 140
                color: "white"
                Text {
                    anchors.fill: parent
                    text: name
                    color: "red"
                }
                MouseArea {
                    propagateComposedEvents: true
                    anchors.fill: parent
                    hoverEnabled: true
                    onContainsMouseChanged: lv.currentlyUnderCursor = containsMouse ? name : ""
                }
            }
        }
    }
    

    -------------- DemoView.qml --------------

    run with following command line: C:\Qt\Qt5.4.0\5.4\msvc2013\bin\qmlviewer.exe DemoView.qml

    When you are not moving mouse cursor, just scrolls listview content with wheel, MouseArea does not see any mouse events.

    How to deal with that?
    Thanks

    p3c0P 1 Reply Last reply
    0
    • M maxsivkov

      Hello

      http://doc.qt.io/qt-5/qml-qtquick-mousearea.html#containsMouse-prop
      Stays that
      Warning: This property is not updated if the area moves under the mouse: containsMouse will not change.

      I faced this problem with following code:

      -------------- DemoView.qml --------------

      import QtQuick 2.0
      
      Rectangle {
          width: 150
          height: 150
      
          color: "gray"
          ListModel {
              id: lmodel
              ListElement {
                  name: "Sample Value 1"
              }
              ListElement {
                  name: "Sample Value 2"
              }
              ListElement {
                  name: "Sample Value 3"
              }
              ListElement {
                  name: "Sample Value 4"
              }
              ListElement {
                  name: "Sample Value 5"
              }
              ListElement {
                  name: "Sample Value 6"
              }
              ListElement {
                  name: "Sample Value 7"
              }
              ListElement {
                  name: "Sample Value 8"
              }
              ListElement {
                  name: "Sample Value 9"
              }
              ListElement {
                  name: "Sample Value10"
              }
              ListElement {
                  name: "Sample Value11"
              }
              ListElement {
                  name: "Sample Value12"
              }
      
          }
          Text {
              id: underCursorText
              height: 30
              width: parent.width
              anchors.top: parent.top
              anchors.left: parent.left
              text: "under cursor: " + lv.currentlyUnderCursor
          }
          ListView {
              anchors.top: underCursorText.bottom
              anchors.left: parent.left
              anchors.bottom: parent.bottom
              anchors.right: parent.right
              property string currentlyUnderCursor : ""
              id: lv
              clip: true
              model: lmodel
              delegate: Rectangle {
                  height: 30
                  width: 140
                  color: "white"
                  Text {
                      anchors.fill: parent
                      text: name
                      color: "red"
                  }
                  MouseArea {
                      propagateComposedEvents: true
                      anchors.fill: parent
                      hoverEnabled: true
                      onContainsMouseChanged: lv.currentlyUnderCursor = containsMouse ? name : ""
                  }
              }
          }
      }
      

      -------------- DemoView.qml --------------

      run with following command line: C:\Qt\Qt5.4.0\5.4\msvc2013\bin\qmlviewer.exe DemoView.qml

      When you are not moving mouse cursor, just scrolls listview content with wheel, MouseArea does not see any mouse events.

      How to deal with that?
      Thanks

      p3c0P Offline
      p3c0P Offline
      p3c0
      Moderators
      wrote on last edited by
      #2

      @maxsivkov That is how it was designed. IMO there must be no other way.
      What is the actual scenario where you require this ? May be there would be some workaround for it.

      157

      1 Reply Last reply
      0
      • M Offline
        M Offline
        maxsivkov
        wrote on last edited by
        #3

        @p3c0 said:

        @maxsivkov That is how it was designed. IMO there must be no other way.
        What is the actual scenario where you require this ? May be there would be some workaround for it.

        Thanks for reply.
        Scenario is to have several elements (images with attached mouseareas (to change image source when mouse is inside the image)
        and also show hints (tooltips) for listview's item.
        To show tooltip my idea was to sit on a onPositionChanged event and restart timer, stop it in onExited event.

        p3c0P 1 Reply Last reply
        0
        • M maxsivkov

          @p3c0 said:

          @maxsivkov That is how it was designed. IMO there must be no other way.
          What is the actual scenario where you require this ? May be there would be some workaround for it.

          Thanks for reply.
          Scenario is to have several elements (images with attached mouseareas (to change image source when mouse is inside the image)
          and also show hints (tooltips) for listview's item.
          To show tooltip my idea was to sit on a onPositionChanged event and restart timer, stop it in onExited event.

          p3c0P Offline
          p3c0P Offline
          p3c0
          Moderators
          wrote on last edited by
          #4

          @maxsivkov

          Scenario is to have several elements (images with attached mouseareas (to change image source when mouse is inside the image)
          and also show hints (tooltips) for listview's item.

          So its better no to do it when the ListView scrolls and only when user hovers mouse over that particular Item

          To show tooltip my idea was to sit on a onPositionChanged event and restart timer, stop it in onExited event.

          I think better to use onEntered and onExited. Using onPositionChanged will continuously restart it as mouse moves. Also hide it after a particular timeout instead of only in onExited.

          157

          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