Important: Please read the Qt Code of Conduct -

One finger page navigation (Flickable,StackView,MouseArea)

  • Hi

    I'm struggling with one finger page navigation. Example below shows settings MouseArea inside Flickable.
    It almost works. However when app is loaded, Flickable element does not work, as if MouseArea was consuming all events. After first "click" on Flickable it begins to work and I have events from MouseArea, tested on Linux and Android Qt 5.9.1

    I have seen this post Yashpal SwipeView page change without animation, I have tried to put MouseArea as a child or sibling of StackView - it doesn't work - either MouseArea or StackView get mouse events depending on "z" value. So if anyone have working example, please share.

    I have put a MouseArea inside Flickable element, it almost works, as I mentioned first click is always "discarded" by Flickable. Maybe I need to set something? or simulate "flick" in Flickable Component.onCompleted ?

    import QtQuick 2.9
    Rectangle {
        id: testPage
        Flickable {
            id: flickable
            anchors.fill: parent
            flickableDirection: Flickable.VerticalFlick
            contentHeight: testPage.height
            contentWidth: testPage.width
            clip: true
            focus: true
            Rectangle {
                id: rectangle
                anchors.margins: 40
                color: "black"
            MouseArea {
                id: mouse
                anchors.fill: parent
                propagateComposedEvents: true
                property real velocity: 0.0
                property int xStart: 0
                property int xPrev: 0
                property int yPrev: 0
                property bool tracing: false
                property bool swiping: false
                signal swipeLeft()
                signal swipeRight()
                onPressed: {
                    xStart = mouse.x
                    xPrev = mouse.x
                    velocity = 0
                    tracing = true
                    swiping = false
                    console.log("main mouse pressed");
                onPositionChanged: {
                    if ( !tracing ) return
                    var currVel = (mouse.x-xPrev)
                    velocity = (velocity + currVel)/2.0
                    xPrev = mouse.x
                    console.log("main vel:"+velocity)
                    if ( velocity < -5  ) {
                        tracing = false
                        console.log("main left swipe");
                    if ( velocity > 5  ) {
                        tracing = false
                        console.log("main right swipe")
                onReleased: {
                    tracing = false

    Best Regards

Log in to reply