16

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!

wittich
  • 1,214

1 Answers1

0

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.