Are you ready for Qt Quick Controls 2.3?

This blog post takes a brief look at some of the new features in Qt Quick Controls 2.3 released as part of Qt 5.10. See also New Features in Qt 5.10 for a more detailed list.

New styles

We are introducing two new styles: Fusion and Imagine. The Fusion style looks familiar to those who have been using Qt Widgets. This is a QML-based implementation of the same design.

The Fusion style The Fusion style

The Imagine style is based on configurable image assets, giving designers full control over how the style looks like. The style comes with a default set of image assets that have been exported from Sketch.

The Imagine style The Imagine style

With the Imagine style it is possible to style the controls without a single line of code. There will be also examples for Illustrator and Photoshop. These designs are provided as starting points for those creating their own designs. See Qt Quick Controls 2: Imagine Style from Mitch for more details.

Menus and actions

Menus and friends have taken big steps forward. We have added new QML types called MenuBar, Action and ActionGroup, and Menu has gained support for sub-menus. It is now possible nest menus, as expected on desktop platforms. We also added support for mnemonics in menus and buttons.

MenuBar and cascading Menus MenuBar and cascading Menus

The usage is identical to the earlier generation of Qt Quick Controls:

import QtQuick 2.10
import QtQuick.Controls 2.3

ApplicationWindow { id: window width: 500 height: 400 visible: true

menuBar: MenuBar { Menu { title: qsTr("&File") Action { text: qsTr("&New...") } Action { text: qsTr("&Open...") } Action { text: qsTr("&Save") } Action { text: qsTr("Save &As...") } MenuSeparator { } Action { text: qsTr("&Quit") } } Menu { title: qsTr("&Edit") Action { text: qsTr("Cu&t") } Action { text: qsTr("&Copy") } Action { text: qsTr("&Paste") } MenuSeparator { } Menu { title: qsTr("&Find/Replace") Action { text: qsTr("Find &Next") } Action { text: qsTr("Find &Previous") } Action { text: qsTr("&Replace...") } } } Menu { title: qsTr("&Help") Action { text: qsTr("&About") } } } }

These are important steps bringing Qt Quick Controls 2 menus functionality-wise on par with native platform menus. This makes it feasible to start considering the next steps integrating native platform menus as a backend for Qt Quick Controls 2 menus.

Palettes

We have added support for configurable palettes, currently supported by the Default, Fusion, and Imagine styles. The other styles are coming later. Here's a screenshot of the Default style with a custom dark palette:

The Default style with a custom dark palette The Default style with a custom dark palette

Q & A:

What about TableView?
- We have made great progress with a new TableView based on the same Qt Quick item view framework ListView and GridView are based on. The current implementation is already able to manage a two-dimensional set of visible items for the current viewport. The performance is on the same level with ListView and GridView. Large amount of columns does not kill the performance like in the ListView-based TableView in Qt Quick Controls 1. Stay tuned for a blog post on the subject.

When is the famous "Object destroyed during incubation" problem going to be fixed?
- We believe we have now the necessary ingredients for finally tackling this issue. I have prepared a patch to the QML engine that allows us to defer the execution of the built-in delegates so that a) replacing them with custom delegates at construction time won't cause troubles for asynchronous incubation and b) the performance (in terms of construction time) of a customized control is not affected by the built-in delegates. As soon as the necessary patch to the QML engine has landed, we can start making use of it in Qt Quick Controls 2. We are targeting the 5.9.x LTS series. I'll report status updates to QTBUG-50992.


Blog Topics:

Comments