Flickable, draggingHorizontally and co

Applications QML
#1

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.

#2

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.

#3

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!

#4

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:

After a nights sleep, I thought some more about Flickable/SilicaFlickable and looked at Qt documentation. I’ve realised, that I don’t actually need to use SilicaFlickable at all in my project!, great, for me the less code, the better!, my 3 pages still flick nicely left and right when pushed/pulled. So, it is more about ‘pageStack’ with ‘onStatusChanged’ doing the heavy lifting of page movement.

1 Like
#5

Sorry to lag behind. You are right in that I didn’t put ‘the question’ up front. And i also didn’t clarify what is actually an issue.

The case I’m dealing with is a ‘view’ of list items where we want something like a carousel (SlideshowView). What it boils down to is that one solution (from @ichthyosaurus ) using Dialog and my attempts with SlideShowView get us to a ‘page’ with a flickable list BUT introduce errors because of index of the list tracking.

It’s a bit too complicated to explain in depth. I’m working on 3 different branches, but it boils down to a bunch of re-writes.

Thanks for sharing!

1 Like
#6

For reference, I’ve moved to a SlideshowView which works well within a Silica Flickable. It’s not ideal for the content (which is mixed html) but it works well enough!

1 Like