aboutsummaryrefslogtreecommitdiffstats
path: root/examples/quickcontrols/gallery/gallery.qml
diff options
context:
space:
mode:
Diffstat (limited to 'examples/quickcontrols/gallery/gallery.qml')
-rw-r--r--examples/quickcontrols/gallery/gallery.qml318
1 files changed, 318 insertions, 0 deletions
diff --git a/examples/quickcontrols/gallery/gallery.qml b/examples/quickcontrols/gallery/gallery.qml
new file mode 100644
index 000000000..65851f8c9
--- /dev/null
+++ b/examples/quickcontrols/gallery/gallery.qml
@@ -0,0 +1,318 @@
+// 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: "Qt Quick Controls"
+
+ //! [orientation]
+ readonly property bool portraitMode: 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 {
+ sequence: 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()
+ }
+ }
+ }
+
+ Shortcut {
+ sequence: "Menu"
+ onActivated: optionsMenuAction.trigger()
+ }
+
+ 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 : "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: "Settings"
+ onTriggered: settingsDialog.open()
+ }
+ Action {
+ text: "Help"
+ onTriggered: window.help()
+ }
+ Action {
+ text: "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: "BusyIndicator"; source: "qrc:/pages/BusyIndicatorPage.qml" }
+ ListElement { title: "Button"; source: "qrc:/pages/ButtonPage.qml" }
+ ListElement { title: "CheckBox"; source: "qrc:/pages/CheckBoxPage.qml" }
+ ListElement { title: "ComboBox"; source: "qrc:/pages/ComboBoxPage.qml" }
+ ListElement { title: "DelayButton"; source: "qrc:/pages/DelayButtonPage.qml" }
+ ListElement { title: "Dial"; source: "qrc:/pages/DialPage.qml" }
+ ListElement { title: "Dialog"; source: "qrc:/pages/DialogPage.qml" }
+ ListElement { title: "Delegates"; source: "qrc:/pages/DelegatePage.qml" }
+ ListElement { title: "Frame"; source: "qrc:/pages/FramePage.qml" }
+ ListElement { title: "GroupBox"; source: "qrc:/pages/GroupBoxPage.qml" }
+ ListElement { title: "PageIndicator"; source: "qrc:/pages/PageIndicatorPage.qml" }
+ ListElement { title: "ProgressBar"; source: "qrc:/pages/ProgressBarPage.qml" }
+ ListElement { title: "RadioButton"; source: "qrc:/pages/RadioButtonPage.qml" }
+ ListElement { title: "RangeSlider"; source: "qrc:/pages/RangeSliderPage.qml" }
+ ListElement { title: "ScrollBar"; source: "qrc:/pages/ScrollBarPage.qml" }
+ ListElement { title: "ScrollIndicator"; source: "qrc:/pages/ScrollIndicatorPage.qml" }
+ ListElement { title: "Slider"; source: "qrc:/pages/SliderPage.qml" }
+ ListElement { title: "SpinBox"; source: "qrc:/pages/SpinBoxPage.qml" }
+ ListElement { title: "StackView"; source: "qrc:/pages/StackViewPage.qml" }
+ ListElement { title: "SwipeView"; source: "qrc:/pages/SwipeViewPage.qml" }
+ ListElement { title: "Switch"; source: "qrc:/pages/SwitchPage.qml" }
+ ListElement { title: "TabBar"; source: "qrc:/pages/TabBarPage.qml" }
+ ListElement { title: "TextArea"; source: "qrc:/pages/TextAreaPage.qml" }
+ ListElement { title: "TextField"; source: "qrc:/pages/TextFieldPage.qml" }
+ ListElement { title: "ToolTip"; source: "qrc:/pages/ToolTipPage.qml" }
+ ListElement { title: "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: {
+ 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: "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)
+ width: Math.round(Math.min(window.width, window.height) / 3 * 2)
+ modal: true
+ focus: true
+ title: "Settings"
+
+ standardButtons: Dialog.Ok | Dialog.Cancel
+ onAccepted: {
+ settings.style = styleBox.displayText
+ settingsDialog.close()
+ }
+ onRejected: {
+ styleBox.currentIndex = styleBox.styleIndex
+ settingsDialog.close()
+ }
+
+ contentItem: ColumnLayout {
+ id: settingsColumn
+ spacing: 20
+
+ RowLayout {
+ spacing: 10
+
+ Label {
+ text: "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
+ }
+ }
+
+ Label {
+ text: "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: "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: "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: "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
+ }
+ }
+ }
+}