Qt Quick Controls 2 / qt.labs.controls

Qt Quick Controls 1 vs Controls 2

Perhaps someone told you that Qt 5 APPs with complex UI or large scrollable Lists are slow. Follow my blog series and try it out: this has totally changed with new Qt Quick Controls 2. In fact: the new Controls are the reason why I recently started with Qt for mobile APP development.

The new Controls were first time introduced in march 2015 for Embedded Devices: http://blog.qt.io/blog/2015/03/31/qt-quick-controls-for-embedded/

At Qt World Summit 2015 in Berlin there was a live demo (see this Video) and in November 2015 a Status-Update providing Controls for Embedded and Mobile as Tech Preview in Qt 5.6. Now the Controls can be used with three styles:

• Material (Google Material Design)
• Universal (Windows 10 Universal Design)
• Default (Qt Design).

Together with High DPI support for all platforms from my POV the first time ever it is possible to develop mobile APPs for Android, iOS and Windows not only good looking but also performant using Qt as platform.

Qt Quick Controls 2 are also providing Controls for Navigation like Drawer or SwipeView. Developing mobile APPs you really need this. You’ll see this in action later.

What’s the main difference between Qt Quick Controls 1 and 2 Implementation ?

Qt Quick Controls 1 == pure QML

Here’s a Button in QML

There are many Objects and Loaders creating Objects which can slow things down.

Qt Quick Controls 2 == C++ / QML

Qt Quick Controls 2 changed this completely:

All the heavy stuff now is done in C++ (named Templates) – per ex. handling of Input Events is more efficient in C++ compared with the QML solution above where a MouseArea and Keys were needed for this. If you want to learn more take a look at the Video.

Here’s the result:

So – if someone tells you Qt 5 APPs are slow, don’t believe it and try it out using the new Controls.

BTW: Last years I developed many BlackBerry 10 Cascades APPs and all are running extremly performant. Cascades uses QML to describe the UI but designed an own UI Framework for BlackBerry 10 where all Controls are implemented in C++. So I’m lucky with this decision from Qt Quick Team also to go the C++ way.

Most examples yet are using Qt Quick Controls 1 – this will change step by step with Qt 5.7

Here’s a summary where you can compare the Controls: https://doc-snapshots.qt.io/qt5-5.6/qtlabscontrols-differences.html

Some of the names are same – others similar.

There’s an overview of all new Controls: http://doc.qt.io/qt-5/qtlabscontrols-index.html

HowTo get started: http://doc.qt.io/qt-5/qtlabscontrols-gettingstarted.html

Material / Universal Style

I really like Google Material Style and will use this as default for my Android and iOS APPs. The Controls are looking great and can be easy customized or extended. We’ll do this later in our Demo APPs we create as part of this blog series.

Qt Quick Controls 2 also support a light and dark Theme:

There’s a Qt Quick Controls 2 (qt.labs.controls) Gallery APP where you can see the new Controls in action. We’ll deploy this APP as a first exercise.

---

← Back (HowTo survive as a Qt Newbie)

→ Next Article (Resolution Independence)

⇐ Home (Overview / Topics)

---