How to change index in OptionSelector immediately (without animation)?

Question

In my app, I use an OptionSelector to choose from a list of bike stations. I also have a map component with placemarkers for each station.

When I tap a placemarker, it also changes the OptionSelector to the index of the corresponding station, as this is good UX.

What isn't good UX is how the OptionSelector responds to this index change, which is animating itself as if it had been flicked by the user's finger. In other words, long after the user has tapped the map marker and received all the information they need, the OptionSelector is still "spinning" to the index of the station.

Here is a video demonstrating this behaviour: https://www.youtube.com/watch?v=jXKWlAmNYsw

I'd like for this OptionSelector to just change its index immediately, with no animation. Is there a way to do this?

Here's how I currently do things. I'm more than happy to be corrected if this is the wrong way of going about this. I use a WorkerScript (a QML thread, more-or-less) to make API calls. When this WorkerScript returns, it moves the OptionSelector like so:

WorkerScript {
    id: queryStationsWorker
    source: "../js/getstations.js"

    onMessage: {
        [...]

        // Move the OptionSelector to the corresponding station's index.
        stationSelector.selectedIndex = getLastStationIndex(lastStation.contents.stationName, stationsModel)

        /*
         * For the sake of clarity:
         *
         * getLastStationIndex() is a function which just returns an integer.
         * lastStation is a U1DB database used for state saving.
         * stationsModel is a model containing all of the stations.
         */
    }
}

Any help or insight appreciated - cheers!

Could please give us just the code enough to reproduce your problem? The video is helpful of course but it's quite hard to help you without a snippet of code to reuse (See http://sscce.org/) — Sylvain Pineau, Dec 14 '14 at 22:18
Hi Sylvain. Apologies for the delay. Here is a QML file you can use to test. Just create a new Ubuntu Simple UI project and replace your main QML file with this: http://pastebin.ubuntu.com/9534780/ — Aaron Hastings, Dec 16 '14 at 00:40

score 0 · Answer 1 · answered Jun 03 '16 at 19:01

You can see a copy of the OptionSelector qml here it uses UbuntuNumberAnimation when it's not expanded. There's no option for switching it off and if the feature is required you're going to have to patch upstream and wait a while for new versions of the library.

You could make your own open selector widget though, remove the animation part and make sure you rename it for use in your code. I recommend this route.

How to change index in OptionSelector immediately (without animation)?

1 Answers1