Using Gestures on a Listview doesnt work-> How to use multiple MouseAreas simultaneously?
-
I want to implement a swipe gesture, so that the user can switch pages with a swipe. This works for most pages, but those pages that contain a ListView dont recognize the gesture, because the ListView seems to kind of steal the MouseEvents for the gesture. Or if I change the z order, the gesture works, but the list doesnt work any more (no scrolling or clicking list items).
Is it somehow possible to make both MouseAreas (ListView, Gesture) work simultaneously? I tried combinations of mouse.accepted = false and preventStealing = true, but that didnt help.
Here is my example code:
@import QtQuick 2.1
Rectangle {
anchors.fill: parentListView { anchors.fill: parent //z: 2 == makes ListView work, but kills gesture model: contactModel delegate: Text { text: name + ": " + number } ListModel { id: contactModel ListElement { name: "Bill Smith" number: "555 3264" } } } MouseArea { id: gestureArea anchors.fill: parent //preventStealing: true == no change property int oldX: 0 onPressed: { oldX = mouseX; //mouse.accepted = false; == makes ListView work, but kills gesture } onReleased: { var xDiff = oldX - mouseX; if (Math.abs(xDiff) < 100) { return; } if( oldX > mouseX) { console.log("left") } else { console.log("right") } } }
}
@ -
Hi,
here is a solution. I added some others things
@
import QtQuick 2.1Rectangle {
anchors.fill: parentListView { id: mylistview //anchors.fill: parent height: 100 width: 600 model: contactModel delegate: Text { text: name + ": " + number MouseArea { anchors.fill: parent onPressed: { console.log("Delegate Pressed") mouse.accepted=false } } } ListModel { id: contactModel ListElement { name: "Bill Smith" number: "555 3264" } ListElement { name: "ok" number: "555 3264" } ListElement { name: "Bill Smith" number: "555 3264" } } MouseArea { anchors.fill: parent onPressed: { console.log("ListView Pressed") mouse.accepted=false } onReleased: mouse=false } } MouseArea { id: gestureArea anchors.fill: parent property int oldX: 0 onPressed: { console.log("Rectangle Pressed") oldX = mouseX; mouse.accepted = false; } onReleased: { var xDiff = oldX - mouseX; if (Math.abs(xDiff) < 100) { return; } if( oldX > mouseX) { console.log("left") } else { console.log("right") } } } Rectangle { anchors.fill: mylistview opacity: 0.1 z: mylistview.z+1 // maybe not necessary color: "blue" MouseArea { anchors.fill: parent onPressed: { console.log("Rectangle Pressed") mouse.accepted = false; } } }
}
@
Sincerely -
Thanks for your reply :-)
Unfortunately your solution doesnt work for me. All I get when swiping over the listview or the free space of the rectangle, is the following output:Rectangle Pressed
ListView Pressed
Delegate PressedBut never the "left" or "right" from the gestureArea :-/ Which Qt Version are you running? Qt 5.2.1 here.
-
Hi,
My version is 5.3. Can you send a example of code where you use "GestureArea". You said it works except for ListView (I guess all Flickable area). So if you could send an example where you use it with two or three panels then it would be easier to see why it doesn't work.
Thanks -
Hi thanks, but I already dismissed the idea and switched to a horizontal listview for swiping through pages (what i wanted to achieve with the gesture area).
So the only example available is the one you posted.