/usr/share/qt5/doc/qtquickcontrols2/qtquickcontrols2-flatstyle-example.html is in qtquickcontrols2-5-doc-html 5.9.5-0ubuntu2.
This file is owned by root:root, with mode 0o644.
The actual contents of the file can be viewed below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- qtquickcontrols2-flatstyle.qdoc -->
<title>Qt Quick Controls 2 - Flat Style | Qt Quick Controls 2 5.9</title>
<link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
<script type="text/javascript">
document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
// loading style sheet breaks anchors that were jumped to before
// so force jumping to anchor again
setTimeout(function() {
var anchor = location.hash;
// need to jump to different anchor first (e.g. none)
location.hash = "#";
setTimeout(function() {
location.hash = anchor;
}, 0);
}, 0);
</script>
</head>
<body>
<div class="header" id="qtdocheader">
<div class="main">
<div class="main-rounded">
<div class="navigationbar">
<table><tr>
<td >Qt 5.9</td><td ><a href="qtquickcontrols2-index.html">Qt Quick Controls 2</a></td><td ><a href="qtquickcontrols2-examples.html">Qt Quick Controls 2 Examples</a></td><td >Qt Quick Controls 2 - Flat Style</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right">Qt 5.9.5 Reference Documentation</td>
</tr></table>
</div>
</div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="sidebar">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#qml-plugin">QML Plugin</a></li>
<li class="level1"><a href="#implementing-custom-controls">Implementing Custom Controls</a></li>
<li class="level1"><a href="#running-the-example">Running the Example</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Qt Quick Controls 2 - Flat Style</h1>
<span class="subtitle"></span>
<!-- $$$flatstyle-description -->
<div class="descr"> <a name="details"></a>
<p><i>Flat</i> Style shows how to integrate customized controls into Qt Quick Designer. The example uses a pure QML plugin to define constants in a singleton. For the declarative parts of the UI, <code>.ui.qml</code> files are used. These can be edited visually in Qt Quick Designer.</p>
<div class="border"><p class="centerAlign"><img src="images/qtquickcontrols2-flatstyle.png" alt="" /></p></div><a name="qml-plugin"></a>
<h2 id="qml-plugin">QML Plugin</h2>
<p>The example contains a plugin called Theme. The plugin consists of a QML file <code>Theme.qml</code> and a <code>qmldir</code> file. The plugin is located in the imports subdirectory and added as a resource. To ensure the plugin is found by QML, we add the import directory to the import paths of the engine in <code>main.cpp</code>.</p>
<pre class="cpp">
<span class="operator">.</span><span class="operator">.</span><span class="operator">.</span>
engine<span class="operator">.</span>addImportPath(<span class="string">":/imports"</span>);
<span class="operator">.</span><span class="operator">.</span><span class="operator">.</span>
</pre>
<p>To ensure the code model and Qt Quick Designer can find the plugin, we add the following line to <i>flatstyle.pro</i>.</p>
<pre class="cpp">
QML_IMPORT_PATH <span class="operator">=</span> $$PWD<span class="operator">/</span>imports
</pre>
<p>All colors, font parameters, and size constants that are used in this example are defined as properties in the singleton called <i>Theme.qml</i>. Usually such attribute values are defined as constants as they are not suppose to change at run time. In this example, we allow the user to change some attributes like the main color, the size parameter, and some font parameters while the application is running.</p>
<p>Defining these attribute values in a singleton makes it easy to maintain and change them. This pattern makes it easy to implement theming.</p>
<a name="implementing-custom-controls"></a>
<h2 id="implementing-custom-controls">Implementing Custom Controls</h2>
<p>The plugin also contains a style for a couple of controls that implement a custom look and feel. This style is located in <code>Flat</code> and is set as the style for the application in <code>qtquickcontrols2.conf</code>.</p>
<p>The example uses the states of a Qt Quick Item to implement the different states of a control. This has the advantage that we can define the custom look in Qt Quick Designer and we can easily verify the different states of a control. To edit the indicator of a switch in Qt Quick Designer we can open Switch.qml and then enter the implementation of the indicator called <code>switchHandle</code> using the combo box on the top next to the combo box for the open documents.</p>
<div class="border"><p class="centerAlign"><img src="images/qtquickcontrols2-flatstyle-creator.png" alt="" /></p></div><p>The application itself is just a simple form that allows the user to adjust a couple of parameters of the custom controls. The user can choose another main color, set the font to bold or underline, and increase the size of the controls by toggling a switch.</p>
<p><i>MainForm.ui.qml</i> is just the pure declarative definition of the form, while <i>flatstyle.qml</i> instantiates the form and implements the logic.</p>
<a name="running-the-example"></a>
<h2 id="running-the-example">Running the Example</h2>
<p>To run the example from Qt Creator, open the <b>Welcome</b> mode and select the example from <b>Examples</b>. For more information, visit Building and Running an Example.</p>
<p>Files:</p>
<ul>
<li><a href="qtquickcontrols2-flatstyle-mainform-ui-qml.html">flatstyle/MainForm.ui.qml</a></li>
<li><a href="qtquickcontrols2-flatstyle-flatstyle-qml.html">flatstyle/flatstyle.qml</a></li>
<li><a href="qtquickcontrols2-flatstyle-flat-button-qml.html">flatstyle/Flat/Button.qml</a></li>
<li><a href="qtquickcontrols2-flatstyle-flat-checkbox-qml.html">flatstyle/Flat/CheckBox.qml</a></li>
<li><a href="qtquickcontrols2-flatstyle-flat-switch-qml.html">flatstyle/Flat/Switch.qml</a></li>
<li><a href="qtquickcontrols2-flatstyle-imports-theme-theme-qml.html">flatstyle/imports/Theme/Theme.qml</a></li>
<li><a href="qtquickcontrols2-flatstyle-main-cpp.html">flatstyle/main.cpp</a></li>
<li><a href="qtquickcontrols2-flatstyle-flatstyle-pro.html">flatstyle/flatstyle.pro</a></li>
<li><a href="qtquickcontrols2-flatstyle-imports-theme-qmldir.html">flatstyle/imports/Theme/qmldir</a></li>
</ul>
</div>
<!-- @@@flatstyle -->
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2017 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>
|