Subnavigation

Kinetic scrolling on any widgets

Remember the Flick Charm [1]? Seems that for many developers, it is simple and easy enough to use and so far the feedback has been positive. On the other hand, one thing that people want to do [2] is to have the flick support for widgets that do not subclass QScrollArea. I wrote this new example exactly for this purpose. It is of course a bit more complicated than Flick Charm (because we do not abuse the event filters), but basically it involves subclassing Flickable (an abstract class) and implementing two functions to set and get the scroll offset. Since Flickable does not inherit QWidget, you also need to forward the interesting mouse events there. And if you still want to receive a click event (useful for e.g. a selection list), there is an option to do so. Now you can kinetically scroll anything!

The code is already landed in the repository (under the flickable subdirectory). There are both the Qt/C++ version and PyQt one (thanks to David for the latter!). The example is a dual-color list which draws almost a thousand items. The code works just fine on Qt for desktop, however just like my last digital clock example, try to grab Qt/S60 and then compile (and launch) this flickable example on your favorite touch-based S60 phones. We spent a great deal of time to ensure that it can scroll fast on real devices. So far it has been tested on both on Nokia 5800 and Nokia N97. Again, thanks to our Video Maestro Alessandro, check the following YouTube video as the proof:

What about bouncing-on-edge feature? Stay tuned, it will be here in a few weeks :)

Footnotes:

[1] On a related note, if you are still using Flick Charm, recently I also managed to fix the scrolling bug there, so make sure you grab the latest version. Also, for those who think the charm does not work on e.g. a list view (because the list would go wild), double check again: did you set the scroll mode to ScrollPerPixel?

[2] And BTW, if you can wait, you have the alternative to use Declarative UI because then you can leverage the pan and flick feature without writing any custom code at all.


Blog Topics:

Comments