Qt Quick Controls 2 Silica Style

March 13, 2018


Sailfish Silica controls were developed when there’s no such thing as Qt Quick Controls (neither first not second).

Qt Quick Controls public introduction – July 2013. Jolla announced it’s Sailfish OS and UI at Slush 2012 – November 2012.

So right now we have separated technologies for the Sailfish OS controls and desktop/other-Qt-supported-platform controls, that are duplicating their functions. It’s harder to maintain a cross-platform app for Sailfish OS too. Аnd improvements from Qt team working on general controls are not getting to Sailfish due to that.



I really wanted to do it since I’ve bought my first Jolla phone several years ago. I’ve asked this question at Russian-speaking community meetups and chats. I’ve received feedback like:

Hey, you can do it, but you don’t need to. Sailfish have some unique UI/UX parts.

All the cross-platform teams I know are sharing C++ business logic and implementing native look-and-feel on every platform separately.

It’s true and I respect this opinion. And it held me for a while… :(

Real-life examples

But when I’m writing my application, I still do need to rewrite GUI completely.

For example, I’m writing some banking application with balance and transaction list. Have to rewrite ListViews, Buttons and other components from Silica to Qt Quick Controls if I want to run it on Linux/KDE for example. But with Android, I could reuse Qt Quick Controls with native look and feel.

Another example – multimedia IPTV application. I want to build it for my DIY-smartTV (arm device + CRT TV :) – no way, have to rewrite UI part completely repeating similar parts.

It not very hard to write several versions. But it’s harder to maintain them.

There’s also similar questions at TJC [1,2] and recent Collaboration Meeting Question from marmistrz.

M4rtinK have to provide additional layer his modrana. It is an option, but I guess if we could implement Qt Quick Controls 2 Silica style there will be no need for an additional layer.

Qt Quick Controls 2 (QQC2) already have Default, Fusion, Imagine, Material and Universal styles. It will be definitely possible to provide Silica style and I’ve received positive comments about my attempts from Joona Petrell at Jolla via email.

My friend eetu, locusf and neochapay are implementing Qt Quick Nemo Controls. As far as I know, it’s based on QtQuick.Controls 1.0 and not based on gestures. (TODO: ask eetu and Sergey (neochapay) more about that). They working hard to provide a completely open-source solution and it’s great. I’m more into silica style and gestures and QQC2. Qt Quick Controls 2 were rewritten in C++ (video with details from QtWS16).

Recently we had a conversation with Kaffeine (Alexander) at Russian-speaking chat and he is supporting QQC2 ideas. He provided additional information:

Current Sailfish app requires around 1500 ms to start: 700 ms is for compiling at first start without invoker) and another 700 ms is for js-based PageStack and ApplicationWindow. Qt Quick based app requires 50 ms.

And we could move the Sailfish-specific part to Qt.SailfishExtras. Example for material style.

QML is for the declarative part, Quick – for UI definition. Move complex code to C++. And, yes, PageStack.js — is a complex code. Example bench from KDAB. Another publication at woboq.

So grep -r "duration: 600" /usr/lib/qt5/qml/Sailfish/ and you could find hardcoded animation duration probably for that reasons :)

There’s also Kirigami project from KDE and I’m following their progress but I’m more into Silica. Kirigami is also using Qt Quick Controls 2 codebase.


Played with QQC2 last year.

Still, a lot of work needs to be done. There are also some changes made in mainline LTS 5.9 comparing to current Jolla Qt 5.6, that we have to take into account (at least make additional researching)

Additional/optional tasks


I do really want to help to implement QQC2 on my favorite mobile OS. Sailfish Silica UI is awesome due to:

 █████╗  █████╗  ██╗██████╗  ██████╗ 
███████║███████║╚██║ █████╔╝██║   ██║
██╔══██║██╔══██║ ██║ ╚═══██╗██║▄▄ ██║
██║  ██║██║  ██║ ██║██████╔╝╚██████╔╝
╚═╝  ╚═╝╚═╝  ╚═╝ ╚═╝╚═════╝  ╚══▀▀═╝