diff options
Diffstat (limited to 'examples/quickcontrols/gallery/gallery.qml')
-rw-r--r-- | examples/quickcontrols/gallery/gallery.qml | 318 |
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 + } + } + } +} |