J-P Nurmi

Qt Quick Controls 2.0 – a new beginning!

Published Friday June 10th, 2016
22 Comments on Qt Quick Controls 2.0 – a new beginning!
Posted in Qt Quick Controls

Qt Quick Controls 2.0 has come a long way since its first technology preview release with Qt 5.6. It provides a more mature set of controls, which are not based on Qt Quick Controls 1 and are redesigned from scratch to gain a significant performance boost. Enough has already been said about the bottlenecks with Qt Quick Controls 1 and its complicated design to support a whole variety of use cases, so let’s not dig into it again. But if you are interested, refer to these blog posts:

The new version 2.0 of Qt Quick Controls enables designing lighter user interfaces, which is a key requirement these days for developing applications that behave well even on environments with limited resources. The APIs provided by the new controls take a more declarative approach, for instance, using attached properties extensively. They also provide more advanced and low-level features such as inheriting font, locale, and style. Such features were supported by Qt Widgets since day one, but they never existed in Qt Quick Controls 1.

Qt Quick Controls 2 is shipped with three styles: Default, Material, and Universal. The latter two are based on Google’s Material and Microsoft’s Universal styles, which are platform- and device-agnostic designs with publicly available specifications. They fit well to the notion, “one template, one behavior, multiple design languages / styles”, that Qt Quick Controls 2 builds upon. There are no native styles in Qt Quick Controls 2 – all styles are cross-platform and look the same on all platforms. Here is a preview of these styles in action:

qtquickcontrols-styles

You could style a single control in your application to give it a different look than what is offered by these styles. In fact, the new controls also enable creating complete style-sets that could be applied to all or several instances of controls used in your application. See the Qt Quick Controls 2 customization instructions for more details.

The following is a video of an application that simulates a coffee machine use case with Qt Quick Controls 2.


With the Qt 5.7 release, the new controls graduates to a fully supported module, after being in the works for almost 1.5 years. Try the Qt 5.7.0 RC to explore the new possibilities with Qt Quick Controls 2!

Do you like this? Share it
Share on LinkedInGoogle+Share on FacebookTweet about this on Twitter

Posted in Qt Quick Controls

22 comments

Nils says:

I like this new approach. Thank you!

What’s the reason for the lack of hover support on the desktop? That’s a very important visual feedback for mouse driven interfaces IMHO.

Is there a roadmap for more complex controls like TableView? The Controls 1 TableView is a notorious performance and resource killer.

J-P Nurmi J-P Nurmi says:

Hi. We’ll be incrementally improving the desktop support, adding such things as the hover effects that are still missing for the time being.

As you’ve noticed, the controls 1 TableView has some severe issues what comes to performance. We surely would like to offer a revamped version in the future, but it’s not a small task to rewrite that beast so that it performs well. πŸ˜‰ We’ll probably take quite different approach, something much closer to ListView and GridView in Qt Quick core. Any progress on this can be monitored via https://bugreports.qt.io/browse/QTBUG-51710.

Robin Burchell says:

QtQuick itself also typically hasn’t had great hover support (e.g when items moved or changed other properties, the scene wasn’t updated about this).

This situation should hopefully improve in the upcoming 5.8 release, and having a more predictable and useful hover implementation at the base should hopefully help enable better use of it elsewhere.

As always, feel free to grab Qt from git and give feedback! πŸ™‚

mkuhn says:

Wow, that looks great. Will this also include dialogs? I am particularly interested in the FileDialog which currently is almost unusable on small devices.

J-P Nurmi J-P Nurmi says:

Thanks! πŸ™‚ So far there’s just a plain Popup type that has been used in the Gallery example to implement the about and settings dialogs. We’re working on DialogButtonBox that adds support for “standard” buttons, which will be later complemented with a Dialog type.

Lioric says:

I don’t get it, what QtQuick controls 2 has to do with QtQuick Controls 1?

Controls 1 is an almost complete desktop controls implementation with (somewhat) native look and feel, but Controls 2 is just a very simple set of some simple (read mobile) controls with common style. Really I dont see the relation between the two and why it is always marketed as if Controls 2 solves all the issues and improves over Controls 1, when it is clearly that they both target different, disparate segments and have zero overlap

J-P Nurmi J-P Nurmi says:

Hi. We are focusing on the areas where Qt Quick is at its strongest, and which Qt Quick Controls 1 was unable to serve due to its complexity. As mentioned above, we will be incrementally improving the desktop support later on, where it makes sense and doesn’t compromise the overall simplicity. Simplicity, after all, has been by far the most important key to achieve good performance. Those who prefer classic desktop patterns and native looks, may be better off with the old controls, at least for the time being.

kryksyh says:

So, does it mean that qml-everywhere fad is gone, and for desktop development one should use widgets as always?

kryksyh says:

I mean, is it worth it to invest time into QuickControls 1, to build desktop app, or it is better to stay with widgets?

What advice can you give to desktop-only developers?

J-P Nurmi J-P Nurmi says:

I’m afraid there’s no simple answer – “it depends”. The best thing with widgets is that they don’t have issues with virtual machines, multiple top-level windows, and such things that typically cause headache with hardware accelerated windows. OpenGL works best in single fullscreen window mode, which makes it a better choice for embedded, mobile, and games, rather than the classic style desktop apps. Also, you wouldn’t really implement large and complex classic desktop style power apps, such as Qt Creator or Outlook, using Qt Quick and QML, right? Deploying modern tablet/mobile/touch-first Qt Quick apps on the desktop as a secondary target can work fine, though, and this is mostly the case that we’d like to support in Qt Quick Controls 2. In the end, I think it depends on many things like whether the typical issues related to hardware accelerated windows is a blocker for you, which platforms you’re targeting, and which type of desktop application you’re developing.

Jonney Shih says:

Do you have a sliding Navigation Drawer and a Floating Action Button for Android?
This is a big thing, twitter has them now.

ekke ekke says:

there’s a Navigation Drawer: https://doc-snapshots.qt.io/qt5-5.7/qml-qtquick-controls2-drawer.html
in some days I’ll have my blog and example app about Navigation Drawer ready
to see the drawer and all other controls in action, from Qt Creator Examples search for ‘Gallery 2’

Floating Action Button is not out-of-the-box but can be done easy.
I have blogged about: http://j.mp/qt-one-page-x (with corresponding app open source at github)

spett says:

Will you support nested menus at some point? How about a classical menu bar?

I’m also really missing the “Action” item that combines keyboard shortcuts with buttons and menu items, and menu items that are able to show these shortcuts.

At least it should be possible to create a menu similar to the drop down menu in the Chrome web browser at some point, I hope.

I’m curious if this will be implemented “soon” or not at all?

J-P Nurmi J-P Nurmi says:

Hi. Yes, we’re working on exposing “platform” menus, menu bars, system tray icons, and dialogs. These are interfacing native platform controls and therefore have support for mnemonics from the underlying platform where applicable. I know it’s not the exact same thing than Action, but for other shortcuts, you can use the Shortcut type from Qt Quick.

Konstantin says:

I see that controls are properly sized depend on pixel density on Android.
(With enabled attribute Qt::AA_EnableHighDpiScaling)

Please explain, this bug is gone?
https://bugreports.qt.io/browse/QTBUG-35701

And we don’t need any hacks like this?
http://pastebin.com/4rr4dSRC

And images loaded properly depends on scaling (2x, 4x etc)?

J-P Nurmi J-P Nurmi says:

Well, the DPI values returned by QScreen is not something controlled by Qt Quick Controls. πŸ™‚ But the new controls do rely on Qt Quick loading the appropriate @2-4x image assets. I believe this was already implemented in Qt 5.6.

Morten says:

The explanation here is that Qt::AA_EnableHighDpiScaling uses the logical display density, as reported by Android DisplayMetrics (https://developer.android.com/reference/android/util/DisplayMetrics.html)

QTBUG-35701 is then not relevant since physical DPI is not used.

Juergen says:

Great job guys.
@J-P Nurmi: Do you have any plans to continue your project http://code.qt.io/cgit/playground/qtqmlandroid.git/
It would be great to have the same concept for iOS as well.

J-P Nurmi J-P Nurmi says:

Thanks. I would love to get back to integrating QML and native controls, but at the moment we have full focus on Qt Quick Controls 2.

Russ says:

I found this comment (from @J-P Nurmi above) quite surprising/alarming:

“Also, you wouldn’t really implement large and complex classic
desktop style power apps, such as Qt Creator or Outlook, using
Qt Quick and QML, right?”

Why wouldn’t we? They seem great for this! Here is an Outlook-like example cited in this very site:

https://www.qt.io/case-hiri/

Is there some fundamental reason *not* to use QML & Qt Quick in large applications? Desktop apps should also have an easy path to a modern look and feel, and QML + Qt Quick Controls seem like the best way.

@Russ: For desktop applications Qt Widgets work very well and adapt to the platform style, so they are very good choice. But it is also well feasible to use Qt Quick on desktop, which many are doing. So it really is mainly about the preferences of the developer as well as the kind of the application.

J-P Nurmi J-P Nurmi says:

Perhaps “complex” was not the best word choice. I suppose I should have put more emphasis on the word “classic”. You know, classic Win32 style desktop apps tend to have a rather convoluted UI, usually not very user-friendly without a mouse pointer. I’m afraid the latest Outlook 2016 still falls into this category. However, Windows 10’s built-in Mail, a UWP app, is a much simpler client which falls into a whole different category of adaptive, more touch-friendly, and “modern” UIs. Which of these categories does Hiri belong to? πŸ™‚ In my personal opinion, Qt Widgets are stronger at the classic desktop UI patterns that they were originally designed for, whereas Qt Quick is a solid choice for modern, fluid UIs.

Commenting closed.

Get started today with Qt Download now