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
}
}
}
}
}
}
}
