<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>gallery.qml Example File | Qt Labs Controls 5.6</title> <link rel="stylesheet" type="text/css" href="style/offline-simple.css" /> <script type="text/javascript"> window.onload = function(){document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");}; </script> </head> <body> <div class="header" id="qtdocheader"> <div class="main"> <div class="main-rounded"> <div class="navigationbar"> <table><tr> <td >Qt 5.6</td><td ><a href="qtlabscontrols-index.html">Qt Labs Controls</a></td><td ><a href="qtlabscontrols-gallery-example.html">Qt Labs Controls - Gallery</a></td><td >gallery.qml Example File</td></tr></table><table class="buildversion"><tr> <td id="buildversion" width="100%" align="right">Qt 5.6.2 Reference Documentation</td> </tr></table> </div> </div> <div class="content"> <div class="line"> <div class="content mainContent"> <div class="sidebar"><div class="sidebar-content" id="sidebar-content"></div></div> <h1 class="title">gallery.qml Example File</h1> <span class="subtitle">gallery/gallery.qml</span> <!-- $$$gallery/gallery.qml-description --> <div class="descr"> <a name="details"></a> <pre class="qml"> <span class="comment">/**************************************************************************** ** ** Copyright (C) 2015 The Qt Company Ltd. ** Contact: http://www.qt.io/licensing/ ** ** This file is part of the examples of the Qt Toolkit. ** ** $QT_BEGIN_LICENSE:BSD$ ** 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$ ** ****************************************************************************/</span> import QtQuick 2.6 import QtQuick.Layouts 1.3 import Qt.labs.controls 1.0 import Qt.labs.controls.material 1.0 import Qt.labs.controls.universal 1.0 import Qt.labs.settings 1.0 <span class="type"><a href="qml-qt-labs-controls-applicationwindow.html">ApplicationWindow</a></span> { <span class="name">id</span>: <span class="name">window</span> <span class="name">width</span>: <span class="number">360</span> <span class="name">height</span>: <span class="number">520</span> <span class="name">visible</span>: <span class="number">true</span> <span class="name">title</span>: <span class="string">"Qt Labs Controls"</span> <span class="type">Settings</span> { <span class="name">id</span>: <span class="name">settings</span> property <span class="type">string</span> <span class="name">style</span>: <span class="string">"Universal"</span> } <span class="name">header</span>: <span class="name">ToolBar</span> { <span class="type">RowLayout</span> { <span class="name">spacing</span>: <span class="number">20</span> <span class="name">anchors</span>.fill: <span class="name">parent</span> <span class="type"><a href="qml-qt-labs-controls-toolbutton.html">ToolButton</a></span> { <span class="name">label</span>: <span class="name">Image</span> { <span class="name">anchors</span>.centerIn: <span class="name">parent</span> <span class="name">source</span>: <span class="string">"qrc:/images/drawer.png"</span> } <span class="name">onClicked</span>: <span class="name">drawer</span>.<span class="name">open</span>() } <span class="type"><a href="qml-qt-labs-controls-label.html">Label</a></span> { <span class="name">id</span>: <span class="name">titleLabel</span> <span class="name">text</span>: <span class="string">"Gallery"</span> <span class="name">font</span>.pixelSize: <span class="number">20</span> <span class="name">elide</span>: <span class="name">Label</span>.<span class="name">ElideRight</span> <span class="name">horizontalAlignment</span>: <span class="name">Qt</span>.<span class="name">AlignHCenter</span> <span class="name">verticalAlignment</span>: <span class="name">Qt</span>.<span class="name">AlignVCenter</span> <span class="name">Layout</span>.fillWidth: <span class="number">true</span> } <span class="type"><a href="qml-qt-labs-controls-toolbutton.html">ToolButton</a></span> { <span class="name">label</span>: <span class="name">Image</span> { <span class="name">anchors</span>.centerIn: <span class="name">parent</span> <span class="name">source</span>: <span class="string">"qrc:/images/menu.png"</span> } <span class="name">onClicked</span>: <span class="name">optionsMenu</span>.<span class="name">open</span>() <span class="type"><a href="qml-qt-labs-controls-menu.html">Menu</a></span> { <span class="name">id</span>: <span class="name">optionsMenu</span> <span class="name">x</span>: <span class="name">parent</span>.<span class="name">width</span> <span class="operator">-</span> <span class="name">width</span> <span class="name">transformOrigin</span>: <span class="name">Menu</span>.<span class="name">TopRight</span> <span class="type"><a href="qml-qt-labs-controls-menuitem.html">MenuItem</a></span> { <span class="name">text</span>: <span class="string">"Settings"</span> <span class="name">onTriggered</span>: <span class="name">settingsPopup</span>.<span class="name">open</span>() } <span class="type"><a href="qml-qt-labs-controls-menuitem.html">MenuItem</a></span> { <span class="name">text</span>: <span class="string">"About"</span> <span class="name">onTriggered</span>: <span class="name">aboutDialog</span>.<span class="name">open</span>() } } } } } <span class="type"><a href="qml-qt-labs-controls-drawer.html">Drawer</a></span> { <span class="name">id</span>: <span class="name">drawer</span> <span class="type"><a href="qml-qt-labs-controls-pane.html">Pane</a></span> { <span class="name">padding</span>: <span class="number">0</span> <span class="name">width</span>: <span class="name">Math</span>.<span class="name">min</span>(<span class="name">window</span>.<span class="name">width</span>, <span class="name">window</span>.<span class="name">height</span>) <span class="operator">/</span> <span class="number">3</span> <span class="operator">*</span> <span class="number">2</span> <span class="name">height</span>: <span class="name">window</span>.<span class="name">height</span> <span class="type">ListView</span> { <span class="name">id</span>: <span class="name">listView</span> <span class="name">currentIndex</span>: -<span class="number">1</span> <span class="name">anchors</span>.fill: <span class="name">parent</span> <span class="name">delegate</span>: <span class="name">ItemDelegate</span> { <span class="name">width</span>: <span class="name">parent</span>.<span class="name">width</span> <span class="name">text</span>: <span class="name">model</span>.<span class="name">title</span> <span class="name">highlighted</span>: <span class="name">ListView</span>.<span class="name">isCurrentItem</span> <span class="name">onClicked</span>: { <span class="keyword">if</span> (<span class="name">listView</span>.<span class="name">currentIndex</span> <span class="operator">!=</span> <span class="name">index</span>) { <span class="name">listView</span>.<span class="name">currentIndex</span> <span class="operator">=</span> <span class="name">index</span> <span class="name">titleLabel</span>.<span class="name">text</span> <span class="operator">=</span> <span class="name">model</span>.<span class="name">title</span> <span class="name">stackView</span>.<span class="name">replace</span>(<span class="name">model</span>.<span class="name">source</span>) } <span class="name">drawer</span>.<span class="name">close</span>() } } <span class="name">model</span>: <span class="name">ListModel</span> { <span class="type">ListElement</span> { <span class="name">title</span>: <span class="string">"BusyIndicator"</span>; <span class="name">source</span>: <span class="string">"qrc:/pages/BusyIndicatorPage.qml"</span> } <span class="type">ListElement</span> { <span class="name">title</span>: <span class="string">"Button"</span>; <span class="name">source</span>: <span class="string">"qrc:/pages/ButtonPage.qml"</span> } <span class="type">ListElement</span> { <span class="name">title</span>: <span class="string">"CheckBox"</span>; <span class="name">source</span>: <span class="string">"qrc:/pages/CheckBoxPage.qml"</span> } <span class="type">ListElement</span> { <span class="name">title</span>: <span class="string">"ComboBox"</span>; <span class="name">source</span>: <span class="string">"qrc:/pages/ComboBoxPage.qml"</span> } <span class="type">ListElement</span> { <span class="name">title</span>: <span class="string">"Dial"</span>; <span class="name">source</span>: <span class="string">"qrc:/pages/DialPage.qml"</span> } <span class="type">ListElement</span> { <span class="name">title</span>: <span class="string">"Drawer"</span>; <span class="name">source</span>: <span class="string">"qrc:/pages/DrawerPage.qml"</span> } <span class="type">ListElement</span> { <span class="name">title</span>: <span class="string">"Frame"</span>; <span class="name">source</span>: <span class="string">"qrc:/pages/FramePage.qml"</span> } <span class="type">ListElement</span> { <span class="name">title</span>: <span class="string">"GroupBox"</span>; <span class="name">source</span>: <span class="string">"qrc:/pages/GroupBoxPage.qml"</span> } <span class="type">ListElement</span> { <span class="name">title</span>: <span class="string">"Menu"</span>; <span class="name">source</span>: <span class="string">"qrc:/pages/MenuPage.qml"</span> } <span class="type">ListElement</span> { <span class="name">title</span>: <span class="string">"PageIndicator"</span>; <span class="name">source</span>: <span class="string">"qrc:/pages/PageIndicatorPage.qml"</span> } <span class="type">ListElement</span> { <span class="name">title</span>: <span class="string">"Popup"</span>; <span class="name">source</span>: <span class="string">"qrc:/pages/PopupPage.qml"</span> } <span class="type">ListElement</span> { <span class="name">title</span>: <span class="string">"ProgressBar"</span>; <span class="name">source</span>: <span class="string">"qrc:/pages/ProgressBarPage.qml"</span> } <span class="type">ListElement</span> { <span class="name">title</span>: <span class="string">"RadioButton"</span>; <span class="name">source</span>: <span class="string">"qrc:/pages/RadioButtonPage.qml"</span> } <span class="type">ListElement</span> { <span class="name">title</span>: <span class="string">"RangeSlider"</span>; <span class="name">source</span>: <span class="string">"qrc:/pages/RangeSliderPage.qml"</span> } <span class="type">ListElement</span> { <span class="name">title</span>: <span class="string">"ScrollBar"</span>; <span class="name">source</span>: <span class="string">"qrc:/pages/ScrollBarPage.qml"</span> } <span class="type">ListElement</span> { <span class="name">title</span>: <span class="string">"ScrollIndicator"</span>; <span class="name">source</span>: <span class="string">"qrc:/pages/ScrollIndicatorPage.qml"</span> } <span class="type">ListElement</span> { <span class="name">title</span>: <span class="string">"Slider"</span>; <span class="name">source</span>: <span class="string">"qrc:/pages/SliderPage.qml"</span> } <span class="type">ListElement</span> { <span class="name">title</span>: <span class="string">"SpinBox"</span>; <span class="name">source</span>: <span class="string">"qrc:/pages/SpinBoxPage.qml"</span> } <span class="type">ListElement</span> { <span class="name">title</span>: <span class="string">"StackView"</span>; <span class="name">source</span>: <span class="string">"qrc:/pages/StackViewPage.qml"</span> } <span class="type">ListElement</span> { <span class="name">title</span>: <span class="string">"SwipeView"</span>; <span class="name">source</span>: <span class="string">"qrc:/pages/SwipeViewPage.qml"</span> } <span class="type">ListElement</span> { <span class="name">title</span>: <span class="string">"Switch"</span>; <span class="name">source</span>: <span class="string">"qrc:/pages/SwitchPage.qml"</span> } <span class="type">ListElement</span> { <span class="name">title</span>: <span class="string">"TabBar"</span>; <span class="name">source</span>: <span class="string">"qrc:/pages/TabBarPage.qml"</span> } <span class="type">ListElement</span> { <span class="name">title</span>: <span class="string">"TextArea"</span>; <span class="name">source</span>: <span class="string">"qrc:/pages/TextAreaPage.qml"</span> } <span class="type">ListElement</span> { <span class="name">title</span>: <span class="string">"TextField"</span>; <span class="name">source</span>: <span class="string">"qrc:/pages/TextFieldPage.qml"</span> } <span class="type">ListElement</span> { <span class="name">title</span>: <span class="string">"Tumbler"</span>; <span class="name">source</span>: <span class="string">"qrc:/pages/TumblerPage.qml"</span> } } <span class="name">ScrollIndicator</span>.vertical: <span class="name">ScrollIndicator</span> { } } } <span class="name">onClicked</span>: <span class="name">close</span>() } <span class="type"><a href="qml-qt-labs-controls-stackview.html">StackView</a></span> { <span class="name">id</span>: <span class="name">stackView</span> <span class="name">anchors</span>.fill: <span class="name">parent</span> <span class="name">initialItem</span>: <span class="name">Pane</span> { <span class="name">id</span>: <span class="name">pane</span> <span class="type">Image</span> { <span class="name">id</span>: <span class="name">logo</span> <span class="name">width</span>: <span class="name">pane</span>.<span class="name">availableWidth</span> <span class="operator">/</span> <span class="number">2</span> <span class="name">height</span>: <span class="name">pane</span>.<span class="name">availableHeight</span> <span class="operator">/</span> <span class="number">2</span> <span class="name">anchors</span>.centerIn: <span class="name">parent</span> <span class="name">anchors</span>.verticalCenterOffset: -<span class="number">50</span> <span class="name">fillMode</span>: <span class="name">Image</span>.<span class="name">PreserveAspectFit</span> <span class="name">source</span>: <span class="string">"qrc:/images/qt-logo.png"</span> } <span class="type"><a href="qml-qt-labs-controls-label.html">Label</a></span> { <span class="name">color</span>: <span class="string">"#26282a"</span> <span class="name">text</span>: <span class="string">"Qt Labs Controls provides a set of controls that can be used to build complete interfaces in Qt Quick."</span> <span class="name">anchors</span>.margins: <span class="number">20</span> <span class="name">anchors</span>.top: <span class="name">logo</span>.<span class="name">bottom</span> <span class="name">anchors</span>.left: <span class="name">parent</span>.<span class="name">left</span> <span class="name">anchors</span>.right: <span class="name">parent</span>.<span class="name">right</span> <span class="name">anchors</span>.bottom: <span class="name">arrow</span>.<span class="name">top</span> <span class="name">horizontalAlignment</span>: <span class="name">Label</span>.<span class="name">AlignHCenter</span> <span class="name">verticalAlignment</span>: <span class="name">Label</span>.<span class="name">AlignVCenter</span> <span class="name">wrapMode</span>: <span class="name">Label</span>.<span class="name">Wrap</span> } <span class="type">Image</span> { <span class="name">id</span>: <span class="name">arrow</span> <span class="name">source</span>: <span class="string">"qrc:/images/arrow.png"</span> <span class="name">anchors</span>.left: <span class="name">parent</span>.<span class="name">left</span> <span class="name">anchors</span>.bottom: <span class="name">parent</span>.<span class="name">bottom</span> } } } <span class="type"><a href="qml-qt-labs-controls-popup.html">Popup</a></span> { <span class="name">id</span>: <span class="name">settingsPopup</span> <span class="name">x</span>: (<span class="name">window</span>.<span class="name">width</span> <span class="operator">-</span> <span class="name">width</span>) <span class="operator">/</span> <span class="number">2</span> <span class="name">y</span>: <span class="name">window</span>.<span class="name">height</span> <span class="operator">/</span> <span class="number">6</span> <span class="name">width</span>: <span class="name">Math</span>.<span class="name">min</span>(<span class="name">window</span>.<span class="name">width</span>, <span class="name">window</span>.<span class="name">height</span>) <span class="operator">/</span> <span class="number">3</span> <span class="operator">*</span> <span class="number">2</span> <span class="name">height</span>: <span class="name">settingsColumn</span>.<span class="name">implicitHeight</span> <span class="operator">+</span> <span class="name">topPadding</span> <span class="operator">+</span> <span class="name">bottomPadding</span> <span class="name">modal</span>: <span class="number">true</span> <span class="name">focus</span>: <span class="number">true</span> <span class="name">closePolicy</span>: <span class="name">Popup</span>.<span class="name">OnEscape</span> <span class="operator">|</span> <span class="name">Popup</span>.<span class="name">OnPressOutside</span> <span class="name">contentItem</span>: <span class="name">ColumnLayout</span> { <span class="name">id</span>: <span class="name">settingsColumn</span> <span class="name">spacing</span>: <span class="number">20</span> <span class="type"><a href="qml-qt-labs-controls-label.html">Label</a></span> { <span class="name">text</span>: <span class="string">"Settings"</span> <span class="name">font</span>.bold: <span class="number">true</span> } <span class="type">RowLayout</span> { <span class="name">spacing</span>: <span class="number">10</span> <span class="type"><a href="qml-qt-labs-controls-label.html">Label</a></span> { <span class="name">text</span>: <span class="string">"Style:"</span> } <span class="type"><a href="qml-qt-labs-controls-combobox.html">ComboBox</a></span> { <span class="name">id</span>: <span class="name">styleBox</span> property <span class="type">int</span> <span class="name">styleIndex</span>: -<span class="number">1</span> <span class="name">model</span>: [<span class="string">"Default"</span>, <span class="string">"Material"</span>, <span class="string">"Universal"</span>] <span class="name">Component</span>.onCompleted: { <span class="name">styleIndex</span> <span class="operator">=</span> <span class="name">find</span>(<span class="name">settings</span>.<span class="name">style</span>) <span class="keyword">if</span> (<span class="name">styleIndex</span> <span class="operator">!==</span> -<span class="number">1</span>) <span class="name">currentIndex</span> <span class="operator">=</span> <span class="name">styleIndex</span> } <span class="name">Layout</span>.fillWidth: <span class="number">true</span> } } <span class="type"><a href="qml-qt-labs-controls-label.html">Label</a></span> { <span class="name">text</span>: <span class="string">"Restart required"</span> <span class="name">color</span>: <span class="string">"#e41e25"</span> <span class="name">opacity</span>: <span class="name">styleBox</span>.<span class="name">currentIndex</span> <span class="operator">!==</span> <span class="name">styleBox</span>.<span class="name">styleIndex</span> ? <span class="number">1.0</span> : <span class="number">0.0</span> <span class="name">horizontalAlignment</span>: <span class="name">Label</span>.<span class="name">AlignHCenter</span> <span class="name">verticalAlignment</span>: <span class="name">Label</span>.<span class="name">AlignVCenter</span> <span class="name">Layout</span>.fillWidth: <span class="number">true</span> <span class="name">Layout</span>.fillHeight: <span class="number">true</span> } <span class="type">RowLayout</span> { <span class="name">spacing</span>: <span class="number">10</span> <span class="type"><a href="qml-qt-labs-controls-button.html">Button</a></span> { <span class="name">id</span>: <span class="name">okButton</span> <span class="name">text</span>: <span class="string">"Ok"</span> <span class="name">onClicked</span>: { <span class="name">settings</span>.<span class="name">style</span> <span class="operator">=</span> <span class="name">styleBox</span>.<span class="name">displayText</span> <span class="name">settingsPopup</span>.<span class="name">close</span>() } <span class="name">Layout</span>.preferredWidth: <span class="number">0</span> <span class="name">Layout</span>.fillWidth: <span class="number">true</span> } <span class="type"><a href="qml-qt-labs-controls-button.html">Button</a></span> { <span class="name">id</span>: <span class="name">cancelButton</span> <span class="name">text</span>: <span class="string">"Cancel"</span> <span class="name">onClicked</span>: { <span class="name">styleBox</span>.<span class="name">currentIndex</span> <span class="operator">=</span> <span class="name">styleBox</span>.<span class="name">styleIndex</span> <span class="name">settingsPopup</span>.<span class="name">close</span>() } <span class="name">Layout</span>.preferredWidth: <span class="number">0</span> <span class="name">Layout</span>.fillWidth: <span class="number">true</span> } } } } <span class="type"><a href="qml-qt-labs-controls-popup.html">Popup</a></span> { <span class="name">id</span>: <span class="name">aboutDialog</span> <span class="name">modal</span>: <span class="number">true</span> <span class="name">focus</span>: <span class="number">true</span> <span class="name">x</span>: (<span class="name">window</span>.<span class="name">width</span> <span class="operator">-</span> <span class="name">width</span>) <span class="operator">/</span> <span class="number">2</span> <span class="name">y</span>: <span class="name">window</span>.<span class="name">height</span> <span class="operator">/</span> <span class="number">6</span> <span class="name">width</span>: <span class="name">Math</span>.<span class="name">min</span>(<span class="name">window</span>.<span class="name">width</span>, <span class="name">window</span>.<span class="name">height</span>) <span class="operator">/</span> <span class="number">3</span> <span class="operator">*</span> <span class="number">2</span> <span class="name">contentHeight</span>: <span class="name">aboutColumn</span>.<span class="name">height</span> <span class="name">closePolicy</span>: <span class="name">Popup</span>.<span class="name">OnEscape</span> <span class="operator">|</span> <span class="name">Popup</span>.<span class="name">OnPressOutside</span> <span class="type">Column</span> { <span class="name">id</span>: <span class="name">aboutColumn</span> <span class="name">spacing</span>: <span class="number">20</span> <span class="type"><a href="qml-qt-labs-controls-label.html">Label</a></span> { <span class="name">text</span>: <span class="string">"About"</span> <span class="name">font</span>.bold: <span class="number">true</span> } <span class="type"><a href="qml-qt-labs-controls-label.html">Label</a></span> { <span class="name">width</span>: <span class="name">aboutDialog</span>.<span class="name">availableWidth</span> <span class="name">text</span>: <span class="string">"The Qt Labs Controls module is a technology preview of the next generation user interface controls based on Qt Quick."</span> <span class="name">wrapMode</span>: <span class="name">Label</span>.<span class="name">Wrap</span> <span class="name">font</span>.pixelSize: <span class="number">12</span> } <span class="type"><a href="qml-qt-labs-controls-label.html">Label</a></span> { <span class="name">width</span>: <span class="name">aboutDialog</span>.<span class="name">availableWidth</span> <span class="name">text</span>: <span class="string">"In comparison to the desktop oriented Qt Quick Controls 1, the experimental Qt Labs "</span> <span class="operator">+</span> <span class="string">"Controls are an order of magnitude simpler, lighter and faster, and are primarily targeting embedded "</span> <span class="operator">+</span> <span class="string">"and mobile platforms."</span> <span class="name">wrapMode</span>: <span class="name">Label</span>.<span class="name">Wrap</span> <span class="name">font</span>.pixelSize: <span class="number">12</span> } } } } </pre> </div> <!-- @@@gallery/gallery.qml --> </div> </div> </div> </div> </div> <div class="footer"> <p> <acronym title="Copyright">©</acronym> 2016 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners.<br> The documentation provided herein is licensed under the terms of the <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation License version 1.3</a> as published by the Free Software Foundation.<br> Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners. </p> </div> </body> </html>