Qt Quick Controls 2 - Gallery¶
The gallery example is a simple application with a drawer menu that contains all the Qt Quick Controls 2. Each menu item opens a page that shows the graphical appearance of a control, allows you to interact with the control, and explains in which circumstances it is handy to use this control.
# Copyright (C) 2022 The Qt Company Ltd.
# SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
from __future__ import annotations
"""
The gallery example is a simple application with a drawer menu that contains
all the Qt Quick Controls. Each menu item opens a page that shows the
graphical appearance of a control, allows you to interact with the control,
and explains in which circumstances it is handy to use this control.
"""
import os
import sys
import platform
from PySide6.QtGui import QGuiApplication, QIcon
from PySide6.QtCore import QSettings, QUrl
from PySide6.QtQml import QQmlApplicationEngine
from PySide6.QtQuickControls2 import QQuickStyle
import rc_gallery # noqa: F401
if __name__ == "__main__":
QGuiApplication.setApplicationName("Gallery")
QGuiApplication.setOrganizationName("QtProject")
app = QGuiApplication()
QIcon.setThemeName("gallery")
settings = QSettings()
if not os.environ.get("QT_QUICK_CONTROLS_STYLE"):
style_name = settings.value("style")
if style_name:
QQuickStyle.setStyle(style_name)
engine = QQmlApplicationEngine()
built_in_styles = ["Basic", "Fusion", "Imagine", "Material", "Universal", "FluentWinUI3"]
if platform.system() == "Darwin":
built_in_styles.append("macOS")
built_in_styles.append("iOS")
elif platform.system() == "Windows":
built_in_styles.append("Windows")
engine.setInitialProperties({"builtInStyles": built_in_styles})
engine.load(QUrl.fromLocalFile(":/gallery.qml"))
rootObjects = engine.rootObjects()
if not rootObjects:
sys.exit(-1)
window = rootObjects[0]
window.setIcon(QIcon(':/qt-project.org/logos/pysidelogo.png'))
exit_code = app.exec()
del engine
sys.exit(exit_code)
// Copyright (C) 2021 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
pragma ComponentBehavior: Bound
import QtCore
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import "." as App
ApplicationWindow {
id: window
width: 360
height: 520
visible: true
title: qsTr("Qt Quick Controls")
//! [orientation]
readonly property bool portraitMode: !orientationCheckBox.checked || window.width < window.height
//! [orientation]
function help() {
let displayingControl = listView.currentIndex !== -1
let currentControlName = displayingControl
? listView.model.get(listView.currentIndex).title.toLowerCase() : ""
let url = "https://doc.qt.io/qt-6/"
+ (displayingControl
? "qml-qtquick-controls2-" + currentControlName + ".html"
: "qtquick-controls2-qmlmodule.html");
Qt.openUrlExternally(url)
}
required property var builtInStyles
Settings {
id: settings
property string style
}
Shortcut {
sequences: ["Esc", "Back"]
enabled: stackView.depth > 1
onActivated: navigateBackAction.trigger()
}
Shortcut {
sequences: [StandardKey.HelpContents]
onActivated: window.help()
}
Action {
id: navigateBackAction
icon.name: stackView.depth > 1 ? "back" : "drawer"
onTriggered: {
if (stackView.depth > 1) {
stackView.pop()
listView.currentIndex = -1
} else {
drawer.open()
}
}
}
Action {
id: optionsMenuAction
icon.name: "menu"
onTriggered: optionsMenu.open()
}
header: App.ToolBar {
RowLayout {
spacing: 20
anchors.fill: parent
anchors.leftMargin: !window.portraitMode ? drawer.width : undefined
ToolButton {
action: navigateBackAction
visible: window.portraitMode
}
Label {
id: titleLabel
text: listView.currentItem ? (listView.currentItem as ItemDelegate).text : qsTr("Gallery")
font.pixelSize: 20
elide: Label.ElideRight
horizontalAlignment: Qt.AlignHCenter
verticalAlignment: Qt.AlignVCenter
Layout.fillWidth: true
}
ToolButton {
action: optionsMenuAction
Menu {
id: optionsMenu
x: parent.width - width
transformOrigin: Menu.TopRight
Action {
text: qsTr("Settings")
onTriggered: settingsDialog.open()
}
Action {
text: qsTr("Help")
onTriggered: window.help()
}
Action {
text: qsTr("About")
onTriggered: aboutDialog.open()
}
}
}
}
}
Drawer {
id: drawer
width: Math.min(window.width, window.height) / 3 * 2
height: window.height
modal: window.portraitMode
interactive: window.portraitMode ? (stackView.depth === 1) : false
position: window.portraitMode ? 0 : 1
visible: !window.portraitMode
ListView {
id: listView
focus: true
currentIndex: -1
anchors.fill: parent
model: ListModel {
ListElement { title: qsTr("BusyIndicator"); source: "qrc:/pages/BusyIndicatorPage.qml" }
ListElement { title: qsTr("Button"); source: "qrc:/pages/ButtonPage.qml" }
ListElement { title: qsTr("CheckBox"); source: "qrc:/pages/CheckBoxPage.qml" }
ListElement { title: qsTr("ComboBox"); source: "qrc:/pages/ComboBoxPage.qml" }
ListElement { title: qsTr("DelayButton"); source: "qrc:/pages/DelayButtonPage.qml" }
ListElement { title: qsTr("Dial"); source: "qrc:/pages/DialPage.qml" }
ListElement { title: qsTr("Dialog"); source: "qrc:/pages/DialogPage.qml" }
ListElement { title: qsTr("Delegates"); source: "qrc:/pages/DelegatePage.qml" }
ListElement { title: qsTr("Frame"); source: "qrc:/pages/FramePage.qml" }
ListElement { title: qsTr("GroupBox"); source: "qrc:/pages/GroupBoxPage.qml" }
ListElement { title: qsTr("MenuBar"); source: "qrc:/pages/MenuBarPage.qml" }
ListElement { title: qsTr("MonthGrid"); source: "qrc:/pages/MonthGridPage.qml" }
ListElement { title: qsTr("PageIndicator"); source: "qrc:/pages/PageIndicatorPage.qml" }
ListElement { title: qsTr("ProgressBar"); source: "qrc:/pages/ProgressBarPage.qml" }
ListElement { title: qsTr("RadioButton"); source: "qrc:/pages/RadioButtonPage.qml" }
ListElement { title: qsTr("RangeSlider"); source: "qrc:/pages/RangeSliderPage.qml" }
ListElement { title: qsTr("ScrollBar"); source: "qrc:/pages/ScrollBarPage.qml" }
ListElement { title: qsTr("ScrollIndicator"); source: "qrc:/pages/ScrollIndicatorPage.qml" }
ListElement { title: qsTr("SearchField"); source: "qrc:/pages/SearchFieldPage.qml" }
ListElement { title: qsTr("Slider"); source: "qrc:/pages/SliderPage.qml" }
ListElement { title: qsTr("SpinBox"); source: "qrc:/pages/SpinBoxPage.qml" }
ListElement { title: qsTr("SplitView"); source: "qrc:/pages/SplitViewPage.qml" }
ListElement { title: qsTr("StackView"); source: "qrc:/pages/StackViewPage.qml" }
ListElement { title: qsTr("SwipeView"); source: "qrc:/pages/SwipeViewPage.qml" }
ListElement { title: qsTr("Switch"); source: "qrc:/pages/SwitchPage.qml" }
ListElement { title: qsTr("TabBar"); source: "qrc:/pages/TabBarPage.qml" }
ListElement { title: qsTr("TableView"); source: "qrc:/pages/TableViewPage.qml" }
ListElement { title: qsTr("TextArea"); source: "qrc:/pages/TextAreaPage.qml" }
ListElement { title: qsTr("TextField"); source: "qrc:/pages/TextFieldPage.qml" }
ListElement { title: qsTr("ToolBar"); source: "qrc:/pages/ToolBarPage.qml" }
ListElement { title: qsTr("ToolTip"); source: "qrc:/pages/ToolTipPage.qml" }
ListElement { title: qsTr("TreeView"); source: "qrc:/pages/TreeViewPage.qml" }
ListElement { title: qsTr("Tumbler"); source: "qrc:/pages/TumblerPage.qml" }
}
delegate: ItemDelegate {
id: delegateItem
width: ListView.view.width
text: title
highlighted: ListView.isCurrentItem
required property int index
required property var model
required property string title
required property string source
onClicked: {
if (stackView.depth > 1)
return
listView.currentIndex = index
stackView.push(source)
if (window.portraitMode)
drawer.close()
}
}
ScrollIndicator.vertical: ScrollIndicator { }
}
}
StackView {
id: stackView
anchors.fill: parent
anchors.leftMargin: !window.portraitMode ? drawer.width : undefined
initialItem: Pane {
id: pane
Image {
id: logo
width: pane.availableWidth / 2
height: pane.availableHeight / 2
anchors.centerIn: parent
anchors.verticalCenterOffset: -50
fillMode: Image.PreserveAspectFit
source: "images/qt-logo.png"
}
Label {
text: qsTr("Qt Quick Controls provides a set of controls that can be used to build complete interfaces in Qt Quick.")
anchors.margins: 20
anchors.top: logo.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: arrow.top
horizontalAlignment: Label.AlignHCenter
verticalAlignment: Label.AlignVCenter
wrapMode: Label.Wrap
}
Image {
id: arrow
source: "images/arrow.png"
anchors.left: parent.left
anchors.bottom: parent.bottom
visible: window.portraitMode
}
}
}
Dialog {
id: settingsDialog
x: Math.round((window.width - width) / 2)
y: Math.round(window.height / 6)
modal: true
focus: true
title: qsTr("Settings")
standardButtons: Dialog.Ok | Dialog.Cancel
onAccepted: {
settings.style = styleBox.displayText
GalleryConfig.disabled = disableControlsCheckBox.checked
settingsDialog.close()
}
onRejected: {
styleBox.currentIndex = styleBox.styleIndex
settingsDialog.close()
}
contentItem: ColumnLayout {
id: settingsColumn
spacing: 20
RowLayout {
spacing: 10
Label {
text: qsTr("Style:")
}
ComboBox {
id: styleBox
property int styleIndex: -1
model: window.builtInStyles
Component.onCompleted: {
styleIndex = find(settings.style, Qt.MatchFixedString)
if (styleIndex !== -1)
currentIndex = styleIndex
}
Layout.fillWidth: true
}
}
RowLayout {
id: colorSchemes
// Some Qt Quick styles prioritize the respective design system guidelines
// over the system palette.
enabled: ["FluentWinUI3", "Fusion", "iOS", "Basic"].includes(styleBox.currentText)
CheckBox {
id: autoColorScheme
checked: true
text: qsTr("Auto")
}
CheckBox {
id: darkColorScheme
text: qsTr("Dark Mode")
}
CheckBox {
id: lightColorScheme
text: qsTr("Light Mode")
}
ButtonGroup {
exclusive: true
buttons: colorSchemes.children
onCheckedButtonChanged: {
let scheme;
switch (checkedButton) {
case autoColorScheme:
scheme = Qt.Unknown
break;
case darkColorScheme:
scheme = Qt.Dark
break;
case lightColorScheme:
scheme = Qt.Light
break;
}
Qt.styleHints.colorScheme = scheme
}
}
}
CheckBox {
id: orientationCheckBox
text: qsTr("Enable Landscape")
checked: false
Layout.fillWidth: true
}
CheckBox {
id: disableControlsCheckBox
checked: GalleryConfig.disabled
text: qsTr("Disable Controls")
Layout.fillWidth: true
}
Label {
text: qsTr("Restart required")
color: "#e41e25"
opacity: styleBox.currentIndex !== styleBox.styleIndex ? 1.0 : 0.0
horizontalAlignment: Label.AlignHCenter
verticalAlignment: Label.AlignVCenter
Layout.fillWidth: true
Layout.fillHeight: true
}
}
}
Dialog {
id: aboutDialog
modal: true
focus: true
title: qsTr("About")
x: (window.width - width) / 2
y: window.height / 6
width: Math.min(window.width, window.height) / 3 * 2
contentHeight: aboutColumn.height
Column {
id: aboutColumn
spacing: 20
Label {
width: aboutDialog.availableWidth
text: qsTr("The Qt Quick Controls module delivers the next generation user interface controls based on Qt Quick.")
wrapMode: Label.Wrap
font.pixelSize: 12
}
Label {
width: aboutDialog.availableWidth
text: qsTr("In comparison to Qt Quick Controls 1, Qt Quick Controls "
+ "are an order of magnitude simpler, lighter, and faster.")
wrapMode: Label.Wrap
font.pixelSize: 12
}
}
}
}
<!DOCTYPE RCC><RCC version="1.0">
<qresource>
<file>+Material/ToolBar.qml</file>
<file>ToolBar.qml</file>
<file>gallery.qml</file>
<file>icons/gallery/20x20/back.png</file>
<file>icons/gallery/20x20/drawer.png</file>
<file>icons/gallery/20x20/menu.png</file>
<file>icons/gallery/20x20@2/back.png</file>
<file>icons/gallery/20x20@2/drawer.png</file>
<file>icons/gallery/20x20@2/menu.png</file>
<file>icons/gallery/20x20@3/back.png</file>
<file>icons/gallery/20x20@3/drawer.png</file>
<file>icons/gallery/20x20@3/menu.png</file>
<file>icons/gallery/20x20@4/back.png</file>
<file>icons/gallery/20x20@4/drawer.png</file>
<file>icons/gallery/20x20@4/menu.png</file>
<file>icons/gallery/index.theme</file>
<file>images/arrow.png</file>
<file>images/arrow@2x.png</file>
<file>images/arrow@3x.png</file>
<file>images/arrow@4x.png</file>
<file>images/arrows.png</file>
<file>images/arrows@2x.png</file>
<file>images/arrows@3x.png</file>
<file>images/arrows@4x.png</file>
<file>images/qt-logo.png</file>
<file>images/qt-logo@2x.png</file>
<file>images/qt-logo@3x.png</file>
<file>images/qt-logo@4x.png</file>
<file>pages/BusyIndicatorPage.qml</file>
<file>pages/ButtonPage.qml</file>
<file>pages/CheckBoxPage.qml</file>
<file>pages/ComboBoxPage.qml</file>
<file>pages/DelayButtonPage.qml</file>
<file>pages/DelegatePage.qml</file>
<file>pages/DialPage.qml</file>
<file>pages/DialogPage.qml</file>
<file>pages/FramePage.qml</file>
<file>pages/GalleryConfig.qml</file>
<file>pages/GroupBoxPage.qml</file>
<file>pages/MenuBarPage.qml</file>
<file>pages/MonthGridPage.qml</file>
<file>pages/PageIndicatorPage.qml</file>
<file>pages/ProgressBarPage.qml</file>
<file>pages/RadioButtonPage.qml</file>
<file>pages/RangeSliderPage.qml</file>
<file>pages/ScrollBarPage.qml</file>
<file>pages/ScrollIndicatorPage.qml</file>
<file>pages/ScrollablePage.qml</file>
<file>pages/SearchFieldPage.qml</file>
<file>pages/SliderPage.qml</file>
<file>pages/SpinBoxPage.qml</file>
<file>pages/SplitViewPage.qml</file>
<file>pages/StackViewPage.qml</file>
<file>pages/SwipeViewPage.qml</file>
<file>pages/SwitchPage.qml</file>
<file>pages/TabBarPage.qml</file>
<file>pages/TableViewPage.qml</file>
<file>pages/TextAreaPage.qml</file>
<file>pages/TextFieldPage.qml</file>
<file>pages/ToolBarPage.qml</file>
<file>pages/ToolTipPage.qml</file>
<file>pages/TreeViewPage.qml</file>
<file>pages/TumblerPage.qml</file>
<file>qmldir</file>
<file>qtquickcontrols2.conf</file>
</qresource>
</RCC>
module App
singleton GalleryConfig 1.0 pages/GalleryConfig.qml
[Material]
Primary=#41cd52
Accent=#41cd52
Theme=System
[Universal]
Accent=#41cd52
Theme=System
// Copyright (C) 2021 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick.Controls
ToolBar {}
// Copyright (C) 2020 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick.Controls.Material
ToolBar {
Material.foreground: "white"
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
pragma ComponentBehavior: Bound
import QtQuick
import QtQuick.Controls
ScrollablePage {
id: page
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: qsTr("BusyIndicator is used to indicate activity while content is being loaded,"
+ " or when the UI is blocked waiting for a resource to become available.")
}
BusyIndicator {
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
ScrollablePage {
id: page
Column {
spacing: 40
width: parent.width
Row {
CheckBox {
id: checkedCheckBox
text: qsTr("Checked")
}
CheckBox {
id: flatCheckBox
text: qsTr("Flat")
}
CheckBox {
id: pressedCheckBox
enabled: !GalleryConfig.disabled
text: qsTr("Pressed")
}
}
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: qsTr("Button presents a push-button that can be pushed or clicked by the user. "
+ "Buttons are normally used to perform an action, or to answer a question.")
}
ColumnLayout {
spacing: 20
anchors.horizontalCenter: parent.horizontalCenter
Button {
enabled: !GalleryConfig.disabled
text: qsTr("Button")
checked: checkedCheckBox.checked
flat: flatCheckBox.checked
down: pressedCheckBox.checked ? true : undefined
Layout.fillWidth: true
}
Button {
enabled: !GalleryConfig.disabled
text: qsTr("Highlighted")
checked: checkedCheckBox.checked
flat: flatCheckBox.checked
down: pressedCheckBox.checked ? true : undefined
highlighted: true
Layout.fillWidth: true
}
RoundButton {
enabled: !GalleryConfig.disabled
text: qsTr("RoundButton")
checked: checkedCheckBox.checked
flat: flatCheckBox.checked
down: pressedCheckBox.checked ? true : undefined
Layout.fillWidth: true
}
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
ScrollablePage {
id: page
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: qsTr("CheckBox presents an option button that can be toggled on or off. "
+ "Check boxes are typically used to select one or more options from a set of options.")
}
Column {
spacing: 20
anchors.horizontalCenter: parent.horizontalCenter
CheckBox {
enabled: !GalleryConfig.disabled
text: qsTr("First")
checked: true
}
CheckBox {
enabled: !GalleryConfig.disabled
text: qsTr("Second")
}
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
ScrollablePage {
id: page
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: qsTr("ComboBox is a combined button and popup list. It presents "
+ "a list of options to the user that occupies minimal screen space.")
}
ComboBox {
enabled: !GalleryConfig.disabled
model: [qsTr("First"), qsTr("Second"), qsTr("Third")]
anchors.horizontalCenter: parent.horizontalCenter
}
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: qsTr("ComboBox can be made editable. An editable combo box auto-"
+ "completes its text based on what is available in the model.")
}
ComboBox {
id: comboBox
enabled: !GalleryConfig.disabled
editable: true
model: ListModel {
ListElement { text: qsTr("Banana") }
ListElement { text: qsTr("Apple") }
ListElement { text: qsTr("Coconut") }
}
onAccepted: {
if (find(editText) === -1)
comboBox.model.append({text: comboBox.editText})
}
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
ScrollablePage {
id: page
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: qsTr("DelayButton is a checkable button that incorporates a delay before the "
+ "button is activated. This delay prevents accidental presses.")
}
DelayButton {
enabled: !GalleryConfig.disabled
text: qsTr("DelayButton")
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
pragma ComponentBehavior: Bound
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
Pane {
ColumnLayout {
spacing: 40
anchors.fill: parent
anchors.topMargin: 20
Label {
Layout.fillWidth: true
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: qsTr("Delegate controls are used as delegates in views such as ListView.")
}
ButtonGroup {
id: radioButtonGroup
}
ListView {
id: listView
clip: true
section.property: "type"
section.delegate: Pane {
id: sectionPane
required property string section
width: ListView.view.width
height: sectionLabel.implicitHeight + 20
Label {
id: sectionLabel
text: sectionPane.section
anchors.centerIn: parent
}
}
Layout.fillWidth: true
Layout.fillHeight: true
model: ListModel {
ListElement { type: "ItemDelegate"; value: qsTr("ItemDelegate1") }
ListElement { type: "ItemDelegate"; value: qsTr("ItemDelegate2") }
ListElement { type: "ItemDelegate"; value: qsTr("ItemDelegate3") }
ListElement { type: "SwipeDelegate"; value: qsTr("SwipeDelegate1") }
ListElement { type: "SwipeDelegate"; value: qsTr("SwipeDelegate2") }
ListElement { type: "SwipeDelegate"; value: qsTr("SwipeDelegate3") }
ListElement { type: "CheckDelegate"; value: qsTr("CheckDelegate1") }
ListElement { type: "CheckDelegate"; value: qsTr("CheckDelegate2") }
ListElement { type: "CheckDelegate"; value: qsTr("CheckDelegate3") }
ListElement { type: "RadioDelegate"; value: qsTr("RadioDelegate1") }
ListElement { type: "RadioDelegate"; value: qsTr("RadioDelegate2") }
ListElement { type: "RadioDelegate"; value: qsTr("RadioDelegate3") }
ListElement { type: "SwitchDelegate"; value: qsTr("SwitchDelegate1") }
ListElement { type: "SwitchDelegate"; value: qsTr("SwitchDelegate2") }
ListElement { type: "SwitchDelegate"; value: qsTr("SwitchDelegate3") }
}
delegate: Loader {
id: delegateLoader
width: ListView.view.width
sourceComponent: delegateComponentMap[type]
required property string value
required property string type
required property var model
required property int index
property ListView view: listView
readonly property var delegateComponentMap: {
"ItemDelegate": itemDelegateComponent,
"SwipeDelegate": swipeDelegateComponent,
"CheckDelegate": checkDelegateComponent,
"RadioDelegate": radioDelegateComponent,
"SwitchDelegate": switchDelegateComponent
}
Component {
id: itemDelegateComponent
ItemDelegate {
enabled: !GalleryConfig.disabled
text: delegateLoader.value
width: delegateLoader.width
}
}
Component {
id: swipeDelegateComponent
SwipeDelegate {
id: swipeDelegate
enabled: !GalleryConfig.disabled
text: delegateLoader.value
width: delegateLoader.width
Component {
id: removeComponent
Rectangle {
color: SwipeDelegate.pressed ? "#333" : "#444"
width: parent.width
height: parent.height
clip: true
SwipeDelegate.onClicked: {
if (delegateLoader.view !== undefined)
delegateLoader.view.model.remove(delegateLoader.index)
}
Label {
font.pixelSize: swipeDelegate.font.pixelSize
text: qsTr("Remove")
color: "white"
anchors.centerIn: parent
}
}
}
SequentialAnimation {
id: removeAnimation
PropertyAction {
target: delegateLoader
property: "ListView.delayRemove"
value: true
}
NumberAnimation {
target: swipeDelegate
property: "height"
to: 0
easing.type: Easing.InOutQuad
}
PropertyAction {
target: delegateLoader
property: "ListView.delayRemove"
value: false
}
}
swipe.left: removeComponent
swipe.right: removeComponent
ListView.onRemove: removeAnimation.start()
}
}
Component {
id: checkDelegateComponent
CheckDelegate {
enabled: !GalleryConfig.disabled
text: delegateLoader.value
}
}
Component {
id: radioDelegateComponent
RadioDelegate {
enabled: !GalleryConfig.disabled
text: delegateLoader.value
ButtonGroup.group: radioButtonGroup
}
}
Component {
id: switchDelegateComponent
SwitchDelegate {
enabled: !GalleryConfig.disabled
text: delegateLoader.value
}
}
}
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
ScrollablePage {
id: page
readonly property int buttonWidth: Math.max(button.implicitWidth, Math.min(button.implicitWidth * 2, page.availableWidth / 3))
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: qsTr("Dialog is a popup that is mostly used for short-term tasks "
+ "and brief communications with the user.")
}
Button {
text: qsTr("Message")
anchors.horizontalCenter: parent.horizontalCenter
width: page.buttonWidth
onClicked: messageDialog.open()
Dialog {
id: messageDialog
enabled: !GalleryConfig.disabled
x: (parent.width - width) / 2
y: (parent.height - height) / 2
title: qsTr("Message")
Label {
text: qsTr("Lorem ipsum dolor sit amet...")
}
}
}
Button {
id: button
text: qsTr("Confirmation")
anchors.horizontalCenter: parent.horizontalCenter
width: page.buttonWidth
onClicked: confirmationDialog.open()
Dialog {
id: confirmationDialog
enabled: !GalleryConfig.disabled
x: (parent.width - width) / 2
y: (parent.height - height) / 2
parent: Overlay.overlay
modal: true
title: qsTr("Confirmation")
standardButtons: Dialog.Yes | Dialog.No
Column {
spacing: 20
anchors.fill: parent
Label {
text: qsTr("The document has been modified.\nDo you want to save your changes?")
}
CheckBox {
text: qsTr("Do not ask again")
anchors.right: parent.right
}
}
}
}
Button {
text: qsTr("Content")
anchors.horizontalCenter: parent.horizontalCenter
width: page.buttonWidth
onClicked: contentDialog.open()
Dialog {
id: contentDialog
enabled: !GalleryConfig.disabled
x: (parent.width - width) / 2
y: (parent.height - height) / 2
width: Math.min(page.width, page.height) / 3 * 2
contentHeight: logo.height * 2
parent: Overlay.overlay
modal: true
title: qsTr("Content")
standardButtons: Dialog.Close
Flickable {
id: flickable
clip: true
anchors.fill: parent
contentHeight: column.height
Column {
id: column
spacing: 20
width: parent.width
Image {
id: logo
width: parent.width / 2
anchors.horizontalCenter: parent.horizontalCenter
fillMode: Image.PreserveAspectFit
source: "../images/qt-logo.png"
}
Label {
width: parent.width
text: qsTr("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc finibus "
+ "in est quis laoreet. Interdum et malesuada fames ac ante ipsum primis "
+ "in faucibus. Curabitur eget justo sollicitudin enim faucibus bibendum. "
+ "Suspendisse potenti. Vestibulum cursus consequat mauris id sollicitudin. "
+ "Duis facilisis hendrerit consectetur. Curabitur sapien tortor, efficitur "
+ "id auctor nec, efficitur et nisl. Ut venenatis eros in nunc placerat, "
+ "eu aliquam enim suscipit.")
wrapMode: Label.Wrap
}
}
ScrollIndicator.vertical: ScrollIndicator {
parent: contentDialog.contentItem
anchors.top: flickable.top
anchors.bottom: flickable.bottom
anchors.right: parent.right
anchors.rightMargin: -contentDialog.rightPadding + 1
}
}
}
}
Button {
text: qsTr("Input")
anchors.horizontalCenter: parent.horizontalCenter
width: page.buttonWidth
onClicked: inputDialog.open()
Dialog {
id: inputDialog
enabled: !GalleryConfig.disabled
x: (parent.width - width) / 2
y: (parent.height - height) / 2
parent: Overlay.overlay
focus: true
modal: true
title: qsTr("Input")
standardButtons: Dialog.Ok | Dialog.Cancel
ColumnLayout {
spacing: 20
anchors.fill: parent
Label {
elide: Label.ElideRight
text: qsTr("Please enter the credentials:")
Layout.fillWidth: true
}
TextField {
focus: true
placeholderText: qsTr("Username")
Layout.fillWidth: true
}
TextField {
placeholderText: qsTr("Password")
echoMode: TextField.PasswordEchoOnEdit
Layout.fillWidth: true
}
}
}
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
ScrollablePage {
id: page
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: qsTr("The Dial is similar to a traditional dial knob that is found on devices such as "
+ "stereos or industrial equipment. It allows the user to specify a value within a range.")
}
Dial {
enabled: !GalleryConfig.disabled
value: 0.5
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
ScrollablePage {
id: page
readonly property int itemWidth: Math.max(button.implicitWidth, Math.min(button.implicitWidth * 3, page.availableWidth / 3 * 2))
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: qsTr("Frame is used to layout a logical group of controls together, within a visual frame.")
}
Frame {
enabled: !GalleryConfig.disabled
anchors.horizontalCenter: parent.horizontalCenter
Column {
spacing: 20
width: page.itemWidth
RadioButton {
text: qsTr("First")
checked: true
width: parent.width
}
RadioButton {
id: button
text: qsTr("Second")
width: parent.width
}
RadioButton {
text: qsTr("Third")
width: parent.width
}
}
}
}
}
// Copyright (C) 2025 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
pragma Singleton
import QtQuick
QtObject {
property bool disabled: false
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
ScrollablePage {
id: page
readonly property int itemWidth: Math.max(button.implicitWidth, Math.min(button.implicitWidth * 3, page.availableWidth / 3 * 2))
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: qsTr("A GroupBox provides a frame, a title on top of it, and a logical group of controls within that frame.")
}
GroupBox {
enabled: !GalleryConfig.disabled
title: qsTr("Title")
anchors.horizontalCenter: parent.horizontalCenter
Column {
spacing: 20
width: page.itemWidth
RadioButton {
text: qsTr("First")
checked: true
width: parent.width
}
RadioButton {
id: button
text: qsTr("Second")
width: parent.width
}
RadioButton {
text: qsTr("Third")
width: parent.width
}
}
}
}
}
// Copyright (C) 2025 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
Page {
id: page
enabled: !GalleryConfig.disabled
header: 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") }
}
Menu {
title: qsTr("&Help")
Action { text: qsTr("&About") }
}
}
Label {
anchors.verticalCenter: parent.verticalCenter
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: qsTr("MenuBar provides a horizontal bar with drop-down menus, "
+ "allowing users to access grouped commands and actions "
+ "within an application.")
}
}
// Copyright (C) 2025 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
id: page
enabled: !GalleryConfig.disabled
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: qsTr("MonthGrid presents a calendar month as a grid of days, "
+ "calculated for a specific month, year, and locale.")
}
ColumnLayout {
spacing: 20
anchors.horizontalCenter: parent.horizontalCenter
RowLayout {
spacing: 10
Layout.fillWidth: true
Button {
implicitWidth: height
enabled: !GalleryConfig.disabled
flat: true
text: qsTr("<")
onClicked: {
const new_month = monthGrid.month - 1
if (new_month < 0) {
monthGrid.month = 11
--monthGrid.year
} else {
monthGrid.month = new_month
}
}
}
Item {
Layout.fillHeight: true
Layout.fillWidth: true
Label {
anchors.centerIn: parent
text: qsTr("%1 %2").arg(monthGrid.locale.monthName(monthGrid.month))
.arg(monthGrid.year)
}
}
Button {
implicitWidth: height
enabled: !GalleryConfig.disabled
flat: true
text: qsTr(">")
onClicked: {
const new_month = monthGrid.month + 1
if (new_month >= 12) {
monthGrid.month = 0
++monthGrid.year
} else {
monthGrid.month = new_month
}
}
}
}
GridLayout {
columns: 2
Layout.fillWidth: true
Layout.fillHeight: true
DayOfWeekRow {
locale: monthGrid.locale
Layout.fillWidth: true
Layout.column: 1
}
WeekNumberColumn {
locale: monthGrid.locale
year: monthGrid.year
month: monthGrid.month
Layout.fillHeight: true
}
MonthGrid {
id: monthGrid
locale: Qt.locale("en_US")
year: currentDate.getFullYear()
month: currentDate.getMonth()
readonly property date currentDate: new Date()
Layout.fillWidth: true
}
}
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
ScrollablePage {
id: page
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: qsTr("PageIndicator is used to indicate the currently active page in a container of pages.")
}
PageIndicator {
count: 5
currentIndex: 2
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
ScrollablePage {
id: page
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: qsTr("ProgressBar indicates the progress of an operation. It can be set in an "
+ "indeterminate mode to indicate that the length of the operation is unknown.")
}
ProgressBar {
id: bar
value: 0.5
anchors.horizontalCenter: parent.horizontalCenter
}
ProgressBar {
indeterminate: true
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
ScrollablePage {
id: page
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: qsTr("RadioButton presents an option button that can be toggled on or off. "
+ "Radio buttons are typically used to select one option from a set of options.")
}
Column {
spacing: 20
anchors.horizontalCenter: parent.horizontalCenter
RadioButton {
text: qsTr("First")
enabled: !GalleryConfig.disabled
}
RadioButton {
text: qsTr("Second")
checked: true
enabled: !GalleryConfig.disabled
}
RadioButton {
text: qsTr("Third")
enabled: false
}
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
ScrollablePage {
id: page
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: qsTr("RangeSlider is used to select a range specified by two values, by sliding each handle along a track.")
}
RangeSlider {
enabled: !GalleryConfig.disabled
first.value: 0.25
second.value: 0.75
anchors.horizontalCenter: parent.horizontalCenter
}
RangeSlider {
enabled: !GalleryConfig.disabled
orientation: Qt.Vertical
first.value: 0.25
second.value: 0.75
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
Page {
id: page
default property alias content: pane.contentItem
Flickable {
anchors.fill: parent
contentHeight: pane.implicitHeight
flickableDirection: Flickable.AutoFlickIfNeeded
Pane {
id: pane
width: parent.width
}
ScrollIndicator.vertical: ScrollIndicator { }
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
Flickable {
id: flickable
enabled: !GalleryConfig.disabled
contentHeight: pane.height
Pane {
id: pane
width: flickable.width
height: flickable.height * 1.25
Column {
id: column
spacing: 40
width: parent.width
CheckBox {
id: alwaysOnCheckBox
width: parent.width
text: qsTr("Always on")
}
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: qsTr("ScrollBar is an interactive bar that can be used to scroll to a specific position. "
+ "A scroll bar can be either vertical or horizontal, and can be attached to any Flickable, "
+ "such as ListView and GridView.")
}
Image {
rotation: 90
source: "../images/arrows.png"
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
ScrollBar.vertical: ScrollBar {
policy: alwaysOnCheckBox.checked ? ScrollBar.AlwaysOn : ScrollBar.AsNeeded
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
Flickable {
id: flickable
enabled: !GalleryConfig.disabled
contentHeight: pane.height
Pane {
id: pane
width: flickable.width
height: flickable.height * 1.25
Column {
id: column
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: qsTr("ScrollIndicator is a non-interactive indicator that indicates the current scroll position. "
+ "A scroll indicator can be either vertical or horizontal, and can be attached to any Flickable, "
+ "such as ListView and GridView.")
}
Image {
rotation: 90
source: "../images/arrows.png"
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
ScrollIndicator.vertical: ScrollIndicator { }
}
// Copyright (C) 2025 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
ScrollablePage {
id: page
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: qsTr("SearchField is a styled text input for searching, typically "
+ "with a magnifier and clear icon.")
}
ListModel {
id: colorModel
ListElement { color: "blue" }
ListElement { color: "green" }
ListElement { color: "red" }
ListElement { color: "yellow" }
ListElement { color: "orange" }
ListElement { color: "purple" }
}
SortFilterProxyModel {
id: colorFilter
model: colorModel
sorters: [
RoleSorter {
roleName: "color"
}
]
filters: [
FunctionFilter {
component CustomData: QtObject { property string color }
property var regExp: new RegExp(colorSearch.text, "i")
onRegExpChanged: invalidate()
function filter(data: CustomData): bool {
return regExp.test(data.color);
}
}
]
}
SearchField {
id: colorSearch
suggestionModel: colorFilter
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
ScrollablePage {
id: page
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: qsTr("Slider is used to select a value by sliding a handle along a track.")
}
Slider {
enabled: !GalleryConfig.disabled
value: 0.5
anchors.horizontalCenter: parent.horizontalCenter
}
Slider {
enabled: !GalleryConfig.disabled
orientation: Qt.Vertical
value: 0.5
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
ScrollablePage {
id: page
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: qsTr("SpinBox allows the user to choose an integer value by clicking the up or down indicator buttons, "
+ "by pressing up or down on the keyboard, or by entering a text value in the input field.")
}
SpinBox {
enabled: !GalleryConfig.disabled
value: 50
anchors.horizontalCenter: parent.horizontalCenter
editable: true
}
}
}
// Copyright (C) 2025 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
id: page
enabled: !GalleryConfig.disabled
ColumnLayout {
anchors.fill: parent
spacing: 40
CheckBox {
id: orientationCheckBox
text: qsTr("Vertical")
}
Label {
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: qsTr("SplitView provides a container that arranges items horizontally "
+ "or vertically, separated by draggable splitters, allowing users "
+ "to interactively resize adjacent views within an application.")
Layout.fillWidth: true
}
SplitView {
orientation: orientationCheckBox.checked ? Qt.Vertical : Qt.Horizontal
Layout.fillHeight: true
Layout.fillWidth: true
Rectangle {
implicitWidth: 200
implicitHeight: 100
color: "lightblue"
SplitView.maximumWidth: 400
Label {
text: "View 1"
anchors.centerIn: parent
}
}
Rectangle {
id: centerItem
color: "lightgray"
SplitView.minimumWidth: 50
SplitView.minimumHeight: 50
SplitView.fillWidth: true
SplitView.fillHeight: true
Label {
text: "View 2"
anchors.centerIn: parent
}
}
Rectangle {
implicitWidth: 200
implicitHeight: 100
color: "lightgreen"
Label {
text: "View 3"
anchors.centerIn: parent
}
}
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
pragma ComponentBehavior: Bound
import QtQuick
import QtQuick.Controls
StackView {
id: stackView
initialItem: page
enabled: !GalleryConfig.disabled
Component {
id: page
Pane {
id: pane
width: parent ? parent.width : 0 // TODO: fix null parent on destruction
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: qsTr("StackView provides a stack-based navigation model which can be used with a set of interlinked pages. "
+ "Items are pushed onto the stack as the user navigates deeper into the material, and popped off again "
+ "when he chooses to go back.")
}
Button {
id: button
text: qsTr("Push")
anchors.horizontalCenter: parent.horizontalCenter
width: Math.max(button.implicitWidth, Math.min(button.implicitWidth * 2, pane.availableWidth / 3))
onClicked: stackView.push(page)
}
Button {
text: qsTr("Pop")
enabled: stackView.depth > 1
width: Math.max(button.implicitWidth, Math.min(button.implicitWidth * 2, pane.availableWidth / 3))
anchors.horizontalCenter: parent.horizontalCenter
onClicked: stackView.pop()
}
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: qsTr("Stack Depth:") + " " + stackView.depth
}
}
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
Pane {
id: pane
SwipeView {
id: view
currentIndex: 1
anchors.fill: parent
enabled: !GalleryConfig.disabled
Repeater {
model: 3
Pane {
width: SwipeView.view.width
height: SwipeView.view.height
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: qsTr("SwipeView provides a navigation model that simplifies horizontal paged scrolling. "
+ "The page indicator on the bottom shows which is the presently active page.")
}
Image {
source: "../images/arrows.png"
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
}
}
PageIndicator {
count: view.count
currentIndex: view.currentIndex
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
ScrollablePage {
id: page
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: qsTr("Switch is an option button that can be dragged or toggled on or off. "
+ "Switches are typically used to select between two states.")
}
Column {
spacing: 20
anchors.horizontalCenter: parent.horizontalCenter
Switch {
enabled: !GalleryConfig.disabled
text: qsTr("First")
}
Switch {
enabled: !GalleryConfig.disabled
text: qsTr("Second")
checked: true
}
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
Page {
id: page
enabled: !GalleryConfig.disabled
SwipeView {
id: swipeView
anchors.fill: parent
currentIndex: tabBar.currentIndex
Repeater {
model: 3
Pane {
width: SwipeView.view.width
height: SwipeView.view.height
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: qsTr("TabBar is a bar with icons or text which allows the user "
+ "to switch between different subtasks, views, or modes.")
}
Image {
source: "../images/arrows.png"
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
}
}
footer: TabBar {
id: tabBar
currentIndex: swipeView.currentIndex
TabButton {
text: qsTr("First")
}
TabButton {
text: qsTr("Second")
}
TabButton {
text: qsTr("Third")
}
}
}
// Copyright (C) 2025 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Qt.labs.qmlmodels
Page {
id: page
enabled: !GalleryConfig.disabled
GridLayout {
anchors.fill: parent
Label {
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: qsTr("TableView provides a scrollable grid that displays data from "
+ "a model in rows and columns, allowing users to view and interact "
+ "with structured information within an application.")
Layout.fillWidth: true
Layout.columnSpan: 2
}
HorizontalHeaderView {
clip: true
syncView: tableView
model: tableModel.headerModel
Layout.column: 1
Layout.row: 1
Layout.fillWidth: true
}
VerticalHeaderView {
clip: true
syncView: tableView
Layout.column: 0
Layout.row: 2
Layout.fillHeight: true
}
TableView {
id: tableView
columnSpacing: 1
rowSpacing: 1
clip: true
selectionModel: ItemSelectionModel {}
model: tableModel
Layout.column: 1
Layout.row: 2
Layout.fillWidth: true
Layout.fillHeight: true
delegate: TableViewDelegate {
implicitWidth: 100
implicitHeight: 50
Component.onCompleted: {
if (contentItem as Label) {
contentItem.horizontalAlignment = Qt.AlignHCenter
contentItem.verticalAlignment = Qt.AlignVCenter
}
}
}
}
}
TableModel {
id: tableModel
property var headerModel: [qsTr("Name"), qsTr("Color")]
TableModelColumn { display: "name" }
TableModelColumn { display: "color" }
rows: [
{
"name": qsTr("cat"),
"color": qsTr("black")
},
{
"name": qsTr("dog"),
"color": qsTr("brown")
},
{
"name": qsTr("bird"),
"color": qsTr("white")
}
]
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
ScrollablePage {
id: page
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: qsTr("TextArea is a multi-line text editor.")
}
TextArea {
enabled: !GalleryConfig.disabled
width: page.availableWidth / 3
anchors.horizontalCenter: parent.horizontalCenter
wrapMode: TextArea.Wrap
text: qsTr("TextArea\n...\n...\n...")
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
ScrollablePage {
id: page
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: qsTr("TextField is a single-line text editor.")
}
TextField {
enabled: !GalleryConfig.disabled
placeholderText: qsTr("TextField")
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
// Copyright (C) 2025 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
id: page
enabled: !GalleryConfig.disabled
header: ToolBar {
RowLayout {
anchors.fill: parent
Item {
Layout.fillHeight: true
Layout.preferredWidth: height
}
Label {
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
text: qsTr("Header")
Layout.fillHeight: true
Layout.fillWidth: true
}
ToolSeparator { }
ToolButton { text: "\u2699" }
}
}
Label {
anchors.centerIn: parent
width: parent.width - 20
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: qsTr("ToolBar provides a horizontal container for application-wide "
+ "and context-sensitive controls, such as navigation buttons and "
+ "search fields, typically used as a header or footer within an "
+ "application window")
}
footer: ToolBar {
RowLayout {
anchors.fill: parent
Label {
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
text: "\u2139"
Layout.fillHeight: true
Layout.preferredWidth: height
}
Label {
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
text: qsTr("Footer")
Layout.fillHeight: true
Layout.fillWidth: true
}
ToolSeparator { }
ToolButton { text: "\u2630" }
}
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
ScrollablePage {
id: page
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: qsTr("A tool tip is a short piece of text that informs the user of a control's function.")
}
Button {
text: qsTr("Tip")
anchors.horizontalCenter: parent.horizontalCenter
ToolTip.timeout: 5000
ToolTip.visible: pressed
ToolTip.text: qsTr("This is a tool tip.")
}
}
}
// Copyright (C) 2025 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Qt.labs.qmlmodels
Page {
id: page
GridLayout {
anchors.fill: parent
anchors.margins: 10
Label {
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: qsTr("TreeView provides a hierarchical view for displaying and "
+ "navigating tree-structured data, allowing users to expand and "
+ "collapse nodes to explore parent-child relationships within a model")
Layout.fillWidth: true
Layout.columnSpan: 2
}
Item {
implicitHeight: 40
Layout.columnSpan: 2
Layout.row: 1
}
HorizontalHeaderView {
clip: true
enabled: !GalleryConfig.disabled
syncView: treeView
model: [qsTr("Location")]
Layout.column: 1
Layout.row: 2
Layout.fillWidth: true
}
VerticalHeaderView {
clip: true
enabled: !GalleryConfig.disabled
syncView: treeView
model: Array.from({length: treeView.rows}, (v, k) => k + 1)
Layout.column: 0
Layout.row: 3
Layout.fillHeight: true
}
TreeView {
id: treeView
clip: true
enabled: !GalleryConfig.disabled
rowSpacing: 2
model: treeModel
Layout.column: 1
Layout.row: 3
Layout.fillWidth: true
Layout.fillHeight: true
selectionModel: ItemSelectionModel {}
delegate: TreeViewDelegate { }
columnWidthProvider: (column) => column === 0 ? treeView.width : 0
Component.onCompleted: expandRecursively()
}
}
TreeModel {
id: treeModel
TableModelColumn { display: "location" }
rows: [
{
location: qsTr("America"),
rows: [
{ location: qsTr("Brazil") },
{
location: qsTr("Canada"),
rows: [
{ location: qsTr("Calgary") },
{ location: qsTr("Vancouver") }
]
}
]
},
{ location: qsTr("Asia") },
{
location: qsTr("Europe"),
rows: [
{
location: qsTr("Italy"),
rows: [
{ location: qsTr("Milan") },
{ location: qsTr("Rome") }
]
},
{ location: qsTr("Portugal") }
]
}
]
}
}
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
ScrollablePage {
id: page
Column {
spacing: 40
width: parent.width
Label {
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: qsTr("Tumbler is used to select a value by spinning a wheel.")
}
Tumbler {
enabled: !GalleryConfig.disabled
model: 10
anchors.horizontalCenter: parent.horizontalCenter
}
}
}