Qt Quick Controls

Qt Quick Controls provides a set of controls that can be used to build complete interfaces in Qt Quick. The module was introduced in Qt 5.7.

Qt Quick Controls comes with a selection of customizable styles. See Styling Qt Quick Controls for more details.

Using the Module

QML API

The QML types of the module are available through the QtQuick.Controls import. To use the types, add the following import statement to your .qml file:

import QtQuick.Controls

C++ API

Using a Qt module's C++ API requires linking against the module library, either directly or through other dependencies. Several build tools have dedicated support for this, including CMake and qmake.

Building with CMake

Use the find_package() command to locate the needed module component in the Qt6 package:

find_package(Qt6 REQUIRED COMPONENTS QuickControls2)
target_link_libraries(mytarget PRIVATE Qt6::QuickControls2)

For more details, see the Build with CMake overview.

Building with qmake

To configure the module for building with qmake, add the module as a value of the QT variable in the project's .pro file:

QT += quickcontrols2

Building From Source

The Qt Image Formats module is recommended, but not required. It provides support for the .webp format used by the Imagine style.

Controls

For the full list of Qt Quick Controls, see QML Types.

Button Controls

Container Controls

Delegate Controls

Indicator Controls

Input Controls

Menu Controls

Navigation Controls

Popup Controls

Separator Controls

Versions

Qt Quick Controls 2.0 was introduced in Qt 5.7. Subsequent minor Qt releases increment the import version of the Qt Quick Controls modules by one, until Qt 5.12, where the import versions match Qt's minor version.

In Qt 6, both the major and minor versions match, and version numbers may be omitted from imports in QML. If the version is omitted, the latest version will be used.

The experimental Qt Labs modules use import version 1.0.

Revisions

Due to how Qt Quick Controls are implemented, new properties that are added may clash with any user-defined properties of the same name. For example, the following snippet will result in an error:

import QtQuick.Controls 2.13

ApplicationWindow {
    // ...

    ComboBox {
        anchors.centerIn: parent

        // As currentValue was added in 2.14, the versioned import above
        // should cause this property to be used, but instead an error is produced:
        // "Cannot override FINAL property"
        property int currentValue: 0
    }
}

These properties should be renamed to avoid the conflict.

Module Evolution

Qt Quick Controls was originally written with touch interfaces as the primary focus. While it is already possible to develop desktop interfaces, work is ongoing to provide a more native look and feel.

Changes to Qt Quick Controls lists important changes in the module API and functionality that were done for the Qt 6 series of Qt.

Articles and Guides

• Getting Started
• Guidelines
• Styling
• Icons
• Customization
• Using File Selectors
• Deployment
• Configuration File
• Environment Variables

Examples

• Gallery
• Chat Tutorial
• Text Editor
• Wearable Demo
• Automotive Example
• All Examples

Reference

• QML Types
• C++ Classes

Related Modules

• Qt Quick
• Qt Quick Layouts
• Qt Quick Templates 2
• Qt Labs Platform

License and Attributions

Qt Quick Controls is available under commercial licenses from The Qt Company. In addition, it is available under the GNU Lesser General Public License, version 3, or the GNU General Public License, version 2. See Qt Licensing for further details.

Furthermore, Qt Quick Controls potentially contains third party modules under the following permissive licenses: