J-P Nurmi

Qt Quick Controls 2.1 and Beyond

Published Thursday October 6th, 2016
40 Comments on Qt Quick Controls 2.1 and Beyond
Posted in Dev Loop, Qt Quick Controls

As most of you already know, Qt Quick Controls allow you to save time developing user interfaces by utilizing a library of ready-made controls with different styles which you also can easily customize to your liking. The Qt Quick Controls 2 module delivers the next generation UI controls with a great performance boost.

The feature freeze of Qt 5.8 was a while back, and the 5.8 beta release is being prepared as we speak. Let’s take a brief look at what’s coming in Qt Quick Controls 2.1 in Qt 5.8.

In the first release of Qt Quick Controls 2, we made a deliberate choice to focus on the areas that the first generation Qt Quick Controls were not able to serve well: embedded and mobile. The next release introduces a few features that improve the behavior of the new controls on traditional desktop platforms.

Hover Effects

Hover effects have been one of the most popular feature requests. We have had the enablers already in place, meaning that it has been possible to implement hover effects for your own custom controls and styles, but the hover effects for the built-in styles did not make it to the first release. I’m happy to announce that the Material and Universal styles have gained hover effects in Qt 5.8. This alone makes the controls more pleasant to use on platforms with a mouse pointer. Check the following video to see how the Universal style hover effects look.

Ripple Effects

While working on the hover effects, it became apparent that we would also like to have ripple effects for the Material style. Take a look at the following screencast to see what we have cooked up.

System Theme

We have also introduced a new theme option for the Material and Universal styles. The new theme is called System, and it simply resolves to either the light or dark theme based on the system theme colors. This feature is opt-in, because it typically takes some extra consideration to make applications look good in both light and dark themes. For example, if you use icons in your application, you may have to ship both light and dark versions.

Platform Types

Another thing we have been working on is a new module that provides a set of experimental “platform” types. These QML types are light-weight wrappers for the native menu, menubar, standard dialog, and system tray icon implementations provided by the Qt Platform Abstraction layer. For the time being, since not all platforms have implementations of all of these native types in place, Qt Widgets are used as a fallback when a native implementation is not available. The platform types integrate seamlessly with Qt Quick, but unlike the heavily customizable Qt Quick Controls, the platform types are not customizable using Qt Quick primitives. Inspired by the good old example by the same name in Qt Quick Controls 1, we have implemented a new Text Editor example that offers a modernized look’n’feel and showcases the platform types.

Qt Quick Controls 2 - Text Editor example (Desktop UI)

New Controls

There are a few new QML types in the core Qt Quick Controls 2 offering too. While we were implementing the Text Editor example, we realized that it would be nice to have ready-made separators that play nice with the built-in styles and themes. We ended up introducing MenuSeparator and ToolSeparator, that are designed to be used in Menu and ToolBar, respectively.

We have also added a new Dialog popup that offers the same convenient “header-content-footer” layout found in ApplicationWindow and Page. Dialog uses DialogButtonBox, which is also offered as a standalone type, to let you configure a set of standard buttons in a breeze.

Qt Quick Controls 2 - Dialogs

Last but not least, our latest family member is RoundButton. Customizing Button to have a round background was a popular question on various forums. Even though it is straight-forward to customize the background, it means losing the default background, which looks different for different styles. We decided to offer a control that does this out of the box. The Material style version of RoundButton supports elevation, so it can be easily used to create a Floating Action Button. We have used RoundButton in the touch UI of the Text Editor example for triggering the edit mode.

Qt Quick Controls 2 - Text Editor example (Touch UI)

What’s Next?

Qt Quick Controls 2 already offers many features Qt Quick Controls 1 never had, but there are still a few smaller and larger features that are, in comparison to the old set, still missing from the new controls. We don’t have an exact time schedule to offer for each feature, but we’ll continue catching up with the rest, version by version. For example, editable ComboBox is something that we have already started working on, and if everything goes well, it is going to be introduced in Qt Quick Controls 2.2 in Qt 5.9. Some notable missing features from Qt Quick Controls 1 are Action, SplitView, TableView, and TreeView.

Other items on the wish-list are Pickers, SegmentedButton, persistent Drawer, floating/transient headers and footers, action bar, pull-to-refresh, multi-touch support, perhaps some new styles… well, a lot of things. We won’t run out of ideas for a while. 🙂 If you have some other great ideas, please don’t hesitate to send us a suggestion!

In other news, Mitch and I are delivering an online presentation about Qt Quick Controls 2.1 on October 11th. Register for the webinar today to learn more!

At the Qt World Summit, there will be two presentations related to Qt Quick Controls 2. Shawn will be talking about developing user interfaces with Qt Quick Controls 2, and Ekke is going to present how he built the Qt World Summit Conference App using Qt Quick Controls 2.

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

Posted in Dev Loop, Qt Quick Controls


Amir says:

Thanks for the FAB!

David says:

Superb work!

Super excited to see this getting in 5.8. Has there been memory/performance improvements? I ask because last time I had my mobile in android crash due to exceeding memory (OS kills it). Loading images in text area (html + images) hogs the memory…

J-P Nurmi J-P Nurmi says:

TextArea in Qt Quick Controls 2 is simply a styled version of TextEdit provided by Qt Quick. Personally I’m not aware of any significant memory consumption related changes in TextEdit, but I have been too busy with Qt Quick Controls 2 to be able to follow all of Qt Quick development lately. Is there a bug report for this?

Confused says:

So hover effects make the control more saturated, unless it’s a switch that’s on, in which case it makes it less saturated?

J-P Nurmi J-P Nurmi says:

The hover effect is directly from the UWP design “specs” ie. the XAML files.

asdf says:

Nice to see that Qt on Android is finally trying to blend in to the system. Can you please get rid of that atrocious iOS style overscroll bounce next?

Bernhard says:

Already looking forward to the Qt 5.8 Beta (the ripple effect support sounds awesome).

I personally really hope that the pull-to-refresh behavior makes it into 5.9. I already created a feature request ticket for it (as for me it’s currently THE thing that’s missing ;)), but lets see how it gets prioritized 🙂

Keep up the great work!
Can’t wait to get my hands on the 5.8 beta.

Have a nice day,

J-P Nurmi J-P Nurmi says:

The development cycle for QQC2.1 in Qt 5.8 was exceptionally short, because the first official QQC2 release in Qt 5.7 got all the attention to the last minute. Now things are different in a way that we’re already ramping up the QQC2.2 development for Qt 5.9.

HM says:

Great work. Coming from the old v1 controls it is a pleasure to work with the v2 control.

Scorp1us says:

I might actually use these now! Looking forward to it!

Scorp1us says:

What’s QQC 2.2 going to focus on?

J-P Nurmi J-P Nurmi says:

TableView is clearly standing out when looking at the number of fearure request votes. It’s a large task and is going to eat up a lot of development time. Interested in other things? Send us feature requests. You still have time to affect the outcome of the next development cycle.

Svenn-Arne Dragly says:

Awesome work on QQC2! This might be a bit outside the scope of a regular TableView, but I would like it to handle large matrices with many rows and columns. If I recall correctly, the QQC1 TableView handled many rows well, but didn’t scale with a large number of columns. Which is expected considering that one TableViewColumn is needed per column. Handling large 2D matrices would be great for scientific applications.

J-P Nurmi J-P Nurmi says:

Right, QQC1 TableView is implemented in QML using a vertical ListView, which is not aware of any columns and manages delegate instances only in vertical direction. The future TableView should do that in both directions. And get rid of the column definition or make it optional for custom column delegates etc.

Ola says:

Great progress!!

“Action” is the only thing I’m really missing now before I can start porting my existing desktop applications. Really hope you will be able to get it into the 5.9-version!

J-P Nurmi J-P Nurmi says:

Once we have proper multi-resolution icon support in Qt Quick, “Action” will follow. A “string iconSource” type of property, the way QQC1 had it, doesn’t quite cut it today…

Ola says:

The really important bit for me regarding “Action” is the way to organize keyboard shortcuts and some number of buttons to perform the same thing. Using the “Shortcut” item makes the code much more difficult to maintain. Keyboard shortcuts are really important in my applications that are not used on touch devices.

So I would be happy to have an action item without any icon support at all.

Jake Petroules Jake Petroules says:

Awesome. “Inspired by the good old example by the same name in Qt Quick Controls 1, we have implemented a new Text Editor example that offers a modernized look’n’feel and showcases the platform types.” — what about native toolbars on macOS? I believe we have an implementation in QtMacExtras that it could use.

J-P Nurmi J-P Nurmi says:

Would it not make sense to provide it via QtMacExtras import?

J-P Nurmi J-P Nurmi says:

So basically the same way QtWinExtras provides QWinThumbnailToolBar and QML ThumbnailToolBar.

John C. says:

Whoa. Hover effects?! Futuristic stuff here.

d3fault says:

if the hover effects will be enabled by default (I’m guessing they will), then will there also be an environment variable to disable them application-wide? rationale: embedded [desktop] + software qtquick renderer = nothx

J-P Nurmi J-P Nurmi says:

Hover effects are only enabled by default by the traditional desktop platform plugins for Windows, macOS, and XCB. It is also possible to disable them application-wide via QStyleHints.

d3fault says:

right, but an environment variable would allow you to disable the hover effects without recompiling or even having access to the source code…

J-P Nurmi J-P Nurmi says:

no problem, we can add an environment variable too

Khalil Ahmad says:

Great Progress!. Can you upload the Coffee Machine Demo App?. Which showcases the new Qt Quick Controls. Thanks.

STiAT says:

Still no icons in the combobox? (qtbug#40907).. 🙁

J-P Nurmi J-P Nurmi says:

QTBUG-40907 is reported for Qt Quick Controls 1. Even though there are no built-in icons in the Qt Quick Controls 2 ComboBox, you can specify a custom delegate that shows anything you want. 🙂

Christian Feldbacher (V-Play) Christian Feldbacher (V-Play) says:

If you are joining Qt World Summit, you can also check out my talk which will be about using Qt Quick Controls and the V-Play extensions on iOS & Android. This is the talk link: https://www.qtworldsummit.com/sessions/how-to-develop-with-qt-for-multiple-screen-resolutions-and-multiple-platforms-and-best-practices-for-an-efficient-app-lifecycle-with-qt-technology-strategy-session/

For native iOS styling, pull-to-refresh, automatic tablet/phone layout changes and more, you can use the V-Play components. Here is the API reference:

And here is a demo available in the Apple & Google Play app stores for downloading:

Cheers, Chris Feldbacher from V-Play

Popdev says:

I had a look at V-Play and think it looks nice, but do you really believe it can compete with fully-featured engines like Unity and Unreal that are available for less money and offer more features?

MJ says:

If only Qt was actually possible to use on mobile without an expensive license, I would jump on board. I can understand licenses for embedded, but it’s hard to justify paying $79/month minimum to develop on mobile and I really think it would help Qt’s adoption if it was available for free for indie teams (<5 people), like Xamarin is.

Simon says:

Is it possible to mix QtQuickControls 1 and 2?

Where can I vote for the TreeView, that’s the only missing component for us

Thanks for your efforts!

J-P Nurmi J-P Nurmi says:

It is possible to mix the two, but there are certain limitations. For example, QQC1 does not play that well with Qt’s new automatic high-DPI scaling system introduced in Qt 5.6, whereas QQC2 essentially relies on it. Unless I remember completely wrong, there’s no ticket created for TreeView yet. We’re well aware that the control is missing, though. 🙂 Nevertheless, you can send suggestions and feature requests via bugreports.qt.io. Thanks!

Vladyslav Stelmakhovskyi says:

Btw, it would be nice to see specs for Tree/Table views (if any)
Ispired by QQC2, I’ve already started to reimplement QQC1’s TableView for my desktop app
With this reimplementation I saved few dozens megs of memory, allocated for app. But still some bindings (main memory eaters) in place so I want to get rid of them complitely

Malek Khlif says:

Nice job. I liket it 😀 and i love Qt.

What is the release date of Qt 5.8 ?

J-P Nurmi J-P Nurmi says:

Thanks! 🙂 Qt 5.8 is scheduled for the end of November. The full schedule is available here: https://wiki.qt.io/Qt_5.8_Release

Vladyslav Stelmakhovskyi says:

Great job!

Hope to see you guys at QtWS16

VioletGiraffe says:

Great news! A themed Dialog is one of the few things I was struggling with in my pet project, now I’ll just postpone until the pre-built Beta is out. Looking forward to stealing the color picker from your text editor example, too, because the QQ 1.0 ColorPicker dialog is broken on Android when used in a Quick 2.0 project (due to double scaling of some items, and it doesn’t support the theme colors).

MBach says:

No TreeView in Qt QQ2 🙁
I was eagerly waiting for this one in next release! Well, I’ll have some extra time to make the port from Qt Widgets to Qt QQ2

Commenting closed.

Get started today with Qt Download now