Qt 5.11 | Qt Quick Extras | Qt Quick Extras - Flat | main.qml Example File

Qt 5.11.3 Reference Documentation

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