gallery.qml Example File

gallery/gallery.qml
/**************************************************************************** ** ** Copyright (C) 2017 The Qt Company Ltd. ** Contact: https://www.qt.io/licensing/ ** ** This file is part of the examples of the Qt Toolkit. ** ** $QT_BEGIN_LICENSE:BSD$ ** Commercial License Usage ** Licensees holding valid commercial Qt licenses may use this file in ** accordance with the commercial license agreement provided with the ** Software or, alternatively, in accordance with the terms contained in ** a written agreement between you and The Qt Company. For licensing terms ** and conditions see https://www.qt.io/terms-conditions. For further ** information use the contact form at https://www.qt.io/contact-us. ** ** BSD License Usage ** Alternatively, you may use this file under the terms of the BSD license ** as follows: ** ** "Redistribution and use in source and binary forms, with or without ** modification, are permitted provided that the following conditions are ** met: ** * Redistributions of source code must retain the above copyright ** notice, this list of conditions and the following disclaimer. ** * Redistributions in binary form must reproduce the above copyright ** notice, this list of conditions and the following disclaimer in ** the documentation and/or other materials provided with the ** distribution. ** * Neither the name of The Qt Company Ltd nor the names of its ** contributors may be used to endorse or promote products derived ** from this software without specific prior written permission. ** ** ** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS ** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT ** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR ** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT ** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, ** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT ** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, ** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY ** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT ** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE ** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." ** ** $QT_END_LICENSE$ ** ****************************************************************************/
import QtQuick 2.9 import QtQuick.Layouts 1.3 import QtQuick.Controls 2.2 import QtQuick.Controls.Material 2.1 import QtQuick.Controls.Universal 2.1 import Qt.labs.settings 1.0 ApplicationWindow { id: window width: 360 height: 520 visible: true title: "Qt Quick Controls 2" Settings { id: settings property string style: "Default" } Shortcut { sequences: ["Esc", "Back"] enabled: stackView.depth > 1 onActivated: { stackView.pop() listView.currentIndex = -1 } } Shortcut { sequence: "Menu" onActivated: optionsMenu.open() } header: ToolBar { Material.foreground: "white" RowLayout { spacing: 20 anchors.fill: parent ToolButton { contentItem: Image { fillMode: Image.Pad horizontalAlignment: Image.AlignHCenter verticalAlignment: Image.AlignVCenter source: stackView.depth > 1 ? "images/back.png" : "images/drawer.png" } onClicked: { if (stackView.depth > 1) { stackView.pop() listView.currentIndex = -1 } else { drawer.open() } } } Label { id: titleLabel text: listView.currentItem ? listView.currentItem.text : "Gallery" font.pixelSize: 20 elide: Label.ElideRight horizontalAlignment: Qt.AlignHCenter verticalAlignment: Qt.AlignVCenter Layout.fillWidth: true } ToolButton { contentItem: Image { fillMode: Image.Pad horizontalAlignment: Image.AlignHCenter verticalAlignment: Image.AlignVCenter source: "images/menu.png" } onClicked: optionsMenu.open() Menu { id: optionsMenu x: parent.width - width transformOrigin: Menu.TopRight MenuItem { text: "Settings" onTriggered: settingsDialog.open() } MenuItem { text: "About" onTriggered: aboutDialog.open() } } } } } Drawer { id: drawer width: Math.min(window.width, window.height) / 3 * 2 height: window.height interactive: stackView.depth === 1 ListView { id: listView focus: true currentIndex: -1 anchors.fill: parent delegate: ItemDelegate { width: parent.width text: model.title highlighted: ListView.isCurrentItem onClicked: { listView.currentIndex = index stackView.push(model.source) drawer.close() } } 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" } } ScrollIndicator.vertical: ScrollIndicator { } } } StackView { id: stackView anchors.fill: parent 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 2 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 } } } 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: availableStyles 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 2 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 the desktop-oriented Qt Quick Controls 1, Qt Quick Controls 2 " + "are an order of magnitude simpler, lighter and faster, and are primarily targeted " + "towards embedded and mobile platforms." wrapMode: Label.Wrap font.pixelSize: 12 } } } }