Are you ready for Qt Quick Controls 2.3?

November 23, 2017 J-P Nurmi

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.

The post Are you ready for Qt Quick Controls 2.3? appeared first on Qt Blog.

Previous
Say hello to Qt Quick Pointer Handlers
Say hello to Qt Quick Pointer Handlers

We’ve known for several years that our multi-touch support in Qt Quick has been inadequate for many use cas...

Next Article
Qt Quick Controls 2: Imagine Style
Qt Quick Controls 2: Imagine Style

Back in April we wrote about image-based styling for Qt Quick Controls 2. Since then, we have made good pro...