Jolla and SailfishOS

2017-04-07 03:52

Horizontal Scrolling SilicaListViews

Some surprisingly tricky task I stumbled upon when developing D-Bus Inspector was how to get horizontal scrolling working for SilicaListViews, that have entries that are wider than the screen.

Standard Solution

Normally you would

as shown here in IntrospectServicePage.qml and you are done.

SilicaListView Solution

For a SilicaListView however this does not work (or at least I could not get it working). Somehow the ListView is always as wide as the screen and hence the HorizontalScrollDecorator is never shown.

To cut a long story short. What you have to do is

Traversing the Label children

This also turned out not to be as strait forward as it sounds.

The problem traversing the children is, that there are also "hidden" children of unknown type.

So if you just try to access the width of every child element not only would you probably end up with the wrong value, you might generate a runtime error since not all of the children have a width property.

Here I had a little bit of help form the Internet. Unfortunately the link to the original post got lost somehow.

The basic idea is very elegant, because is simple:

So that is what we do:

Global Functions

Since I need to do this for a number of different instances of SilicaListView, it makes sense to write a function that I can access from the global scope.

Turns out in QML this is strait forward.

It appears that if you use an identifier not known to QML in your code (as I did with GlobalFunctions in line 15 of DSessionBusServicesPage.qml), QML uses a file of that name (+.qml), if it can find one.

If you give that "import" an id (line 16, same file), than you can access functions defined in that scope (file), as shown in line 57 of DSessionBusServicesPage.qml.