Qt Quick Controls QML Types
Qt Quick Controls provides QML types for creating user interfaces. These QML types work in conjunction with Qt Quick and Qt Quick Layouts.
Qt Quick Controls QML types can be imported into your application using the following import statement in your .qml file:
import QtQuick.Controls
QML Types
Abstract base type providing functionality common to buttons | |
Abstract user interface action | |
Groups actions together | |
Styled top-level window with support for a header and footer | |
Indicates background activity, for example, while content is being loaded | |
Push-button that can be clicked to perform a command or answer a question | |
Mutually-exclusive group of checkable buttons | |
Check button that can be toggled on or off | |
Item delegate with a check indicator that can be toggled on or off | |
Combined button and popup list for selecting options | |
Abstract base type providing functionality common to containers | |
Abstract base type providing functionality common to all controls | |
Check button that triggers when held down long enough | |
Circular dial that is rotated to set a value | |
Popup dialog with standard buttons and a title, used for short-term interaction with the user | |
A button box used in dialogs | |
Side panel that can be opened and closed using a swipe gesture | |
Visual frame for a logical group of controls | |
Visual frame and title for a logical group of controls | |
Provides a horizontal header view to accompany a TableView | |
Basic item delegate that can be used in various views and controls | |
Styled text label with inherited font | |
Popup that can be used as a context menu or popup menu | |
Provides a window menu bar | |
Presents a drop-down menu within a MenuBar | |
Presents an item within a Menu | |
Separates a group of items in a menu from adjacent items | |
A window overlay for popups | |
Styled page control with support for a header and footer | |
Indicates the currently active page | |
Provides a background matching with the application style and theme | |
Base type of popup-like user interface controls | |
Indicates the progress of an operation | |
Exclusive radio button that can be toggled on or off | |
Exclusive item delegate with a radio indicator that can be toggled on or off | |
Used to select a range of values by sliding two handles along a track | |
A push-button control with rounded corners that can be clicked by the user | |
Vertical or horizontal interactive scroll bar | |
Vertical or horizontal non-interactive scroll indicator | |
Scrollable view | |
Used to select a value by sliding a handle along a track | |
Allows the user to select from a set of preset values | |
Provides attached properties for SplitView handles | |
Lays out items with a draggable splitter between each item | |
Provides a stack-based navigation model | |
Swipable item delegate | |
Enables the user to navigate pages by swiping sideways | |
Button that can be toggled on or off | |
Item delegate with a switch indicator that can be toggled on or off | |
Allows the user to switch between different views or subtasks | |
Button with a look suitable for a TabBar | |
Multi-line text input area | |
Single-line text input field | |
Container for context-sensitive controls | |
Button with a look suitable for a ToolBar | |
Separates a group of items in a toolbar from adjacent items | |
Provides tool tips for any control | |
Spinnable wheel of items that can be selected | |
Provides a vertical header view to accompany a TableView |
Using Qt Quick Controls types in property declarations
As mentioned in Qt Quick Templates 2 QML Types, each type in Qt Quick Controls is backed by a C++ "template" type. These types are non-visual implementations of controls' logic and behavior.
For example, the Menu type's API and behavior is defined by the C++ type in Qt Quick Templates. Each style that wants to provide a Menu must have a Menu.qml available, and the root item in that file must be the Menu from Qt Quick Templates. When you import QtQuick.Controls and create a Menu in QML, the type you get is actually the QML Menu defined by the style's Menu.qml.
In order to use a control as the type in a property declaration, you should use the corresponding type from Qt Quick Templates. For example, suppose you had a PopupOpener component, which was a Button that opened a Popup:
// PopupButton.qml
import QtQuick.Controls
Button {
required property Popup popup
onClicked: popup.open()
}
// main.qml
PopupButton {
popup: saveChangesDialog
}
Dialog {
id: saveChangesDialog
// ...
}Running this code will result in an error:
Unable to assign Dialog_QMLTYPE to Popup_QMLTYPE
This is because of the inheritance hierarchy:
Popup (C++ type in QtQuick.Templates)
│ └── Popup (QML type in QtQuick.Controls)
└── Dialog (C++ type in QtQuick.Templates)
└── Dialog (QML type in QtQuick.Controls)Dialog from QtQuick.Controls does not derive from the Popup from QtQuick.Controls, but from QtQuick.Templates.
Instead, use the Popup from Qt Quick Templates as the property type:
// PopupButton.qml import QtQuick.Controls import QtQuick.Templates as T Button { required property T.Popup popup onClicked: popup.open() }
For more information on the Qt Quick Controls module, see the Qt Quick Controls module documentation.
Related Information
© 2021 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.