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

    }
    @



  • 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



  • 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.



  • 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.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.