Changes to Qt Quick Controls

To enable compile time type registration, each Qt Quick Controls style is now a proper QML module. Previously, a single Button.qml was sufficient to create your own style. While convenient, this required some non-standard API, which in turn required adaptation in tooling like Qt Designer.

Now, all QML types that a style implements must be declared in that style's qmldir file:

module MyStyle
Button 1.0 Button.qml

By unifying this with the rest of the QML world, styles become more familiar to developers and hopefully easier to understand for beginners. As a consequence, the following API had to be removed:

• QQuickStyle::addStylePath()

• QQuickStyle::availableStyles()

• QQuickStyle::path()

• QQuickStyle::stylePathList()

• QT_QUICK_CONTROLS_STYLE_PATH

Now that the styles are required to be found in the QML engine's import path like any other QML module, it is no longer necessary or possible to support this API.

Style names▲

MyProject
├── main.qml
├── HomePage.qml
└── +material
    └───HomePage.qml

MyProject
├── main.qml
├── HomePage.qml
└── +Material
    └───HomePage.qml

Importing a style now has extra meaning due to the way that imports work internally. Previously, importing QtQuick.Controls would register the control types from the current style with the QML engine:

import QtQuick.Controls

We refer to this as runtime style selection, as the style is selected at runtime.

Explicitly importing QtQuick.Controls.Material would then simply expose any extra API provided by that style (for example, the attached Material type):

import QtQuick.Controls.Material

Now, explicitly importing a style does both.

This effectively means that the control types (like Button) from the last imported style will be used. We refer to this as compile time style selection.

This has implications for existing code. Namely, if your application supports more than one style, move these imports into their own QML files that are file-selected.

For example, if you have the following main.qml:

import QtQuick.Controls
import QtQuick.Controls.Material
import QtQuick.Controls.Universal

ApplicationWindow {
    width: 600
    height: 400
    visible: true

    Material.theme: darkMode ? Material.Dark : Material.Light
    Universal.theme: darkMode ? Universal.Dark : Universal.Light

    // Child items, etc.
}

You can move the common code into a "base" component:

// MainWindow.qml

import QtQuick.Controls

ApplicationWindow {}

Then, add a +Material subdirectory, and in it, add the Material-specific code into MainWindow.qml:

// +Material/MainWindow.qml

import QtQuick.Controls.Material

ApplicationWindow {
    Material.theme: darkMode ? Material.Dark : Material.Light
}

Do the same for Universal:

// +Universal/MainWindow.qml

import QtQuick.Controls.Universal

ApplicationWindow {
    Universal.theme: darkMode ? Universal.Dark : Universal.Light
}

Then, in main.qml:

import QtQuick.Controls

MainWindow {
    width: 600
    height: 400
    visible: true

    // Child items, etc.
}

See also: Using File Selectors with Qt Quick Controls.

The deprecated overlay properties and attached API were removed. Use the Overlay attached type instead.

The pressed property is now read-only. To modify the visual pressed state of a ComboBox, use the down property instead.

The deprecated removeItem(var) function was removed. removeItem(Item) or takeItem(int) can be used instead.

Dialog's accepted() and rejected() signals are now emitted before closed() when calling done(), accept() and reject().

The deprecated removeItem(var) function was removed. removeItem(Item) or takeItem(int) can be used instead.

ToolTip's timeout now begins only after opened() has been emitted. This results in tooltips with enter transitions being visible for the entire duration of the timeout property. This means that they are visible slightly longer than they were before, so it may be worthwhile to visually check tooltips in your application and adjust timeouts if necessary.

The StackView.Transition enum value was deprecated. The operation argument can be omitted in order to use the default transition for any given operation.

implicitWidth and implicitHeight must now be provided for Tumbler's contentItem, making it consistent with all other controls.