Using Gestures on a Listview doesnt work-> How to use multiple MouseAreas simultaneously?

DerMas

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: parent

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

}
@

archqt

Hi,
here is a solution. I added some others things
@
import QtQuick 2.1

Rectangle {
anchors.fill: parent

ListView {
    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

DerMas

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 Pressed

But never the "left" or "right" from the gestureArea :-/ Which Qt Version are you running? Qt 5.2.1 here.

archqt

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

DerMas

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.