main.qml Example File
flat/main.qml/**************************************************************************** ** ** Copyright (C) 2016 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.4 import QtQuick.Layouts 1.0 import QtQuick.Controls 1.4 import QtQuick.Controls.Styles.Flat 1.0 as Flat import QtQuick.Extras 1.4 import QtQuick.Extras.Private 1.0 ApplicationWindow { id: window width: 480 height: 860 title: "Flat Example" visible: true readonly property bool contentLoaded: contentLoader.item readonly property alias anchorItem: controlsMenu property int currentMenu: -1 readonly property int textMargins: Math.round(32 * Flat.FlatStyle.scaleFactor) readonly property int menuMargins: Math.round(13 * Flat.FlatStyle.scaleFactor) readonly property int menuWidth: Math.min(window.width, window.height) * 0.75 onCurrentMenuChanged: { xBehavior.enabled = true; anchorCurrentMenu(); } onMenuWidthChanged: anchorCurrentMenu() function anchorCurrentMenu() { switch (currentMenu) { case -1: anchorItem.x = -menuWidth; break; case 0: anchorItem.x = 0; break; case 1: anchorItem.x = -menuWidth * 2; break; } } Item { id: container anchors.fill: parent Item { id: loadingScreen anchors.fill: parent visible: !contentLoaded Timer { running: true interval: 100 // TODO: Find a way to know when the loading screen has been rendered instead // of using an abritrary amount of time. onTriggered: contentLoader.sourceComponent = Qt.createComponent("Content.qml") } Column { anchors.centerIn: parent spacing: Math.round(10 * Flat.FlatStyle.scaleFactor) BusyIndicator { anchors.horizontalCenter: parent.horizontalCenter } Label { text: "Loading Light Flat UI..." width: Math.min(loadingScreen.width, loadingScreen.height) * 0.8 height: font.pixelSize anchors.horizontalCenter: parent.horizontalCenter renderType: Text.QtRendering font.pixelSize: Math.round(26 * Flat.FlatStyle.scaleFactor) horizontalAlignment: Text.AlignHCenter fontSizeMode: Text.Fit font.family: Flat.FlatStyle.fontFamily font.weight: Font.Light } } } Rectangle { id: controlsMenu x: container.x - width z: contentContainer.z + 1 width: menuWidth height: parent.height // Don't let the menus become visible when resizing the window Binding { target: controlsMenu property: "x" value: container.x - controlsMenu.width when: !xBehavior.enabled && !xNumberAnimation.running && currentMenu == -1 } Behavior on x { id: xBehavior enabled: false NumberAnimation { id: xNumberAnimation easing.type: Easing.OutExpo duration: 500 onRunningChanged: xBehavior.enabled = false } } Rectangle { id: controlsTitleBar width: parent.width height: toolBar.height color: Flat.FlatStyle.defaultTextColor Label { text: "Controls" font.family: Flat.FlatStyle.fontFamily font.pixelSize: Math.round(16 * Flat.FlatStyle.scaleFactor) renderType: Text.QtRendering color: "white" anchors.left: parent.left anchors.leftMargin: menuMargins anchors.verticalCenter: parent.verticalCenter } } ListView { id: controlView width: parent.width anchors.top: controlsTitleBar.bottom anchors.bottom: parent.bottom clip: true currentIndex: 0 model: contentLoaded ? contentLoader.item.componentModel : null delegate: MouseArea { id: delegateItem width: parent.width height: 64 * Flat.FlatStyle.scaleFactor onClicked: { if (controlView.currentIndex != index) controlView.currentIndex = index; currentMenu = -1; } Rectangle { width: parent.width height: Flat.FlatStyle.onePixel anchors.bottom: parent.bottom color: Flat.FlatStyle.lightFrameColor } Label { text: delegateItem.ListView.view.model[index].name font.pixelSize: Math.round(15 * Flat.FlatStyle.scaleFactor) font.family: Flat.FlatStyle.fontFamily renderType: Text.QtRendering color: delegateItem.ListView.isCurrentItem ? Flat.FlatStyle.styleColor : Flat.FlatStyle.defaultTextColor anchors.left: parent.left anchors.leftMargin: menuMargins anchors.verticalCenter: parent.verticalCenter } } Rectangle { width: parent.height height: 8 * Flat.FlatStyle.scaleFactor rotation: 90 anchors.left: parent.right transformOrigin: Item.TopLeft gradient: Gradient { GradientStop { color: Qt.rgba(0, 0, 0, 0.15) position: 0 } GradientStop { color: Qt.rgba(0, 0, 0, 0.05) position: 0.5 } GradientStop { color: Qt.rgba(0, 0, 0, 0) position: 1 } } } } } Item { id: contentContainer anchors.top: parent.top anchors.bottom: parent.bottom anchors.left: controlsMenu.right width: parent.width ToolBar { id: toolBar visible: !loadingScreen.visible width: parent.width height: 54 * Flat.FlatStyle.scaleFactor z: contentLoader.z + 1 style: Flat.ToolBarStyle { padding.left: 0 padding.right: 0 } RowLayout { anchors.fill: parent MouseArea { id: controlsButton Layout.preferredWidth: toolBar.height + textMargins Layout.preferredHeight: toolBar.height onClicked: currentMenu = currentMenu == 0 ? -1 : 0 Column { id: controlsIcon anchors.left: parent.left anchors.leftMargin: textMargins anchors.verticalCenter: parent.verticalCenter spacing: Math.round(2 * Flat.FlatStyle.scaleFactor) Repeater { model: 3 Rectangle { width: Math.round(4 * Flat.FlatStyle.scaleFactor) height: width radius: width / 2 color: Flat.FlatStyle.defaultTextColor } } } } Text { text: "Light Flat UI Demo" font.family: Flat.FlatStyle.fontFamily font.pixelSize: Math.round(16 * Flat.FlatStyle.scaleFactor) horizontalAlignment: Text.AlignHCenter color: "#666666" Layout.fillWidth: true } MouseArea { id: settingsButton Layout.preferredWidth: controlsButton.Layout.preferredWidth Layout.preferredHeight: controlsButton.Layout.preferredHeight onClicked: currentMenu = currentMenu == 1 ? -1 : 1 SettingsIcon { width: Math.round(32 * Flat.FlatStyle.scaleFactor) height: Math.round(32 * Flat.FlatStyle.scaleFactor) anchors.verticalCenter: parent.verticalCenter anchors.right: parent.right anchors.rightMargin: textMargins - Math.round(8 * Flat.FlatStyle.scaleFactor) } } } } Loader { id: contentLoader anchors.left: parent.left anchors.right: parent.right anchors.top: toolBar.bottom anchors.bottom: parent.bottom property QtObject settingsData: QtObject { readonly property bool checks: disableSingleItemsAction.checked readonly property bool frames: !greyBackgroundAction.checked readonly property bool allDisabled: disableAllAction.checked } property QtObject controlData: QtObject { readonly property int componentIndex: controlView.currentIndex readonly property int textMargins: window.textMargins } MouseArea { enabled: currentMenu != -1 // We would be able to just set this to true here, if it weren't for QTBUG-43083. hoverEnabled: enabled anchors.fill: parent preventStealing: true onClicked: currentMenu = -1 focus: enabled z: 1000 } } } Rectangle { id: settingsMenu z: contentContainer.z + 1 width: menuWidth height: parent.height anchors.left: contentContainer.right Rectangle { id: optionsTitleBar width: parent.width height: toolBar.height color: Flat.FlatStyle.defaultTextColor Label { text: "Options" font.family: Flat.FlatStyle.fontFamily font.pixelSize: Math.round(16 * Flat.FlatStyle.scaleFactor) renderType: Text.QtRendering color: "white" anchors.left: parent.left anchors.leftMargin: menuMargins anchors.verticalCenter: parent.verticalCenter } } Action { id: disableAllAction checkable: true checked: false } Action { id: disableSingleItemsAction checkable: true checked: false } Action { id: greyBackgroundAction checkable: true checked: false } ListView { id: optionsListView width: parent.width anchors.top: optionsTitleBar.bottom anchors.bottom: parent.bottom clip: true interactive: delegateHeight * count > height readonly property int delegateHeight: 64 * Flat.FlatStyle.scaleFactor model: [ { name: "Disable all", action: disableAllAction }, { name: "Disable single items", action: disableSingleItemsAction }, { name: "Grey background", action: greyBackgroundAction }, { name: "Exit", action: null } ] delegate: Rectangle { id: optionDelegateItem width: parent.width height: optionsListView.delegateHeight Rectangle { width: parent.width height: Flat.FlatStyle.onePixel anchors.bottom: parent.bottom color: Flat.FlatStyle.lightFrameColor } Loader { sourceComponent: optionText !== "Exit" ? optionsListView.checkBoxComponent : optionsListView.exitComponent anchors.fill: parent anchors.leftMargin: menuMargins property string optionText: optionsListView.model[index].name property int optionIndex: index } } property Component checkBoxComponent: Item { Label { text: optionText font.family: Flat.FlatStyle.fontFamily font.pixelSize: Math.round(15 * Flat.FlatStyle.scaleFactor) fontSizeMode: Text.Fit renderType: Text.QtRendering verticalAlignment: Text.AlignVCenter color: Flat.FlatStyle.defaultTextColor height: parent.height anchors.left: parent.left anchors.right: checkBox.left anchors.rightMargin: Flat.FlatStyle.twoPixels } CheckBox { id: checkBox checked: optionsListView.model[optionIndex].action.checked anchors.right: parent.right anchors.rightMargin: menuMargins anchors.verticalCenter: parent.verticalCenter onCheckedChanged: optionsListView.model[optionIndex].action.checked = checkBox.checked } } property Component exitComponent: MouseArea { anchors.fill: parent onClicked: Qt.quit() Label { text: optionText font.family: Flat.FlatStyle.fontFamily font.pixelSize: Math.round(15 * Flat.FlatStyle.scaleFactor) renderType: Text.QtRendering color: Flat.FlatStyle.defaultTextColor anchors.verticalCenter: parent.verticalCenter } } Rectangle { width: parent.height height: 8 * Flat.FlatStyle.scaleFactor rotation: -90 anchors.right: parent.left transformOrigin: Item.TopRight gradient: Gradient { GradientStop { color: Qt.rgba(0, 0, 0, 0.15) position: 0 } GradientStop { color: Qt.rgba(0, 0, 0, 0.05) position: 0.5 } GradientStop { color: Qt.rgba(0, 0, 0, 0) position: 1 } } } } } } }