Qt Quick Controls 2 / qt.labs.controls

April 6, 2016 — 5 Comments

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

quick2_01

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:

quick2_02

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:

quick2_03

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:

quick2_04

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)


5 responses to Qt Quick Controls 2 / qt.labs.controls

  1. 

    It’s very nice with the higher performance for QtQuickControl2 . I want to develop desktop App, and the new version of such controls can help me to boost the speed. But The QtQuickcontrol2 does not support “Hover” feature on Desktop. Sometimes, I want my button have such hovers. Is this the trade-off to choose QtQuickControl2 on Desktop?

  2. 

    Hi Tan, it was a matter of prioritization that hover effects didn’t make it to the first release. The Material and Universal styles have gained hover effects in Qt Quick Controls 2.1 in Qt 5.8.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s