Flickable, draggingHorizontally and co

So, I’m testing using flickable and it seems horizontal flicking in a page context is ignored?

onFlickStarted: {
        console.debug("flick start");
}

Fires only on vertical flick?

onMovementEnded : {
        console.debug("ah, moving!");
}

Fires whenever you ‘mouse release’

onDraggingHorizontallyChanged:  {
    console.debug(Flickable.flickingHorizontally)
}

Ah, well. thought I’d kick at the can.

I’m trying to implement a ‘next page’ flick (flick left for next page).

EDIT: Should I just add a mousearea containing the flickable? Seems really counterintuitive.

Flickable probably isn’t the best way to implement a next page style flick, a ListView with snapMode: ListView.SnapOneItem and boundsBehavior: Flickable.StopAtBounds; set may be better suited.

That would probably introduce some propagate issues with both components fighting for the touch event, it can be a pain that way.

If only it was that simple. The construct in question is a bit of a legacy nightmare:
an Item (dubbed page) containing
a SilicaFlickable containing
a Column containing, among other things, an abstraction called a
RescalingRichtText

Frankensteins QML :wink: @ichthyosaurus came up with a clever way of flicking it using a Dialog (with a Loader) as proxy which, sadly, introduces some other problems. But is very clever. Refactoring. Ah hum.

Thanks anyway!

Hopefully I have understood your question. I have used this approach several times and works very nicely.

You need to use pageStack.pushAttached to be able to flick left to your next page, this also means you can hide the page indicator with showNavigationIndicator: false

Here’s a snippet from one of my home automation apps;

    Page {
        id: page

        allowedOrientations: Orientation.All

        showNavigationIndicator: false

        onStatusChanged: {
            if (status == PageStatus.Active && pageStack.depth === 1) {
                pageStack.pushAttached("SecondPage.qml")
                console.log("Lights")                
            }
        }
        SilicaFlickable {
            anchors.fill: parent

As always, where possible, read the docs!; Silica Reference Documentation - Sailfish OS

By the way, this line from your question; “I’m trying to implement a ‘next page’ flick (flick left for next page).” should have been your opening paragraph! :slight_smile: