/usr/share/qt5/doc/qtquick/qmlexampletoggleswitch.html is in qtdeclarative5-doc-html 5.5.1-2ubuntu6.
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 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 | <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- example-slideswitch.qdoc -->
<title>Qt Quick Examples - Toggle Switch | Qt Quick 5.5</title>
<link rel="stylesheet" type="text/css" href="style/offline.css" />
</head>
<body>
<div class="header" id="qtdocheader">
<div class="main">
<div class="main-rounded">
<div class="navigationbar">
<ul>
<li>Qt 5.5</li>
<li><a href="qtquick-index.html">Qt Quick</a></li>
<li>Qt Quick Examples - Toggle Switch</li>
<li id="buildversion">Qt 5.5.1 Reference Documentation</li>
</ul>
</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="#switch-qml">Switch.qml</a></li>
<li class="level1"><a href="#walkthrough">Walkthrough</a></li>
<li class="level2"><a href="#interface">Interface</a></li>
<li class="level2"><a href="#images-and-user-interaction">Images and user interaction</a></li>
<li class="level2"><a href="#states">States</a></li>
<li class="level2"><a href="#functions">Functions</a></li>
<li class="level2"><a href="#transition">Transition</a></li>
<li class="level1"><a href="#usage">Usage</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Qt Quick Examples - Toggle Switch</h1>
<span class="subtitle"></span>
<!-- $$$qmlexampletoggleswitch.html-description -->
<div class="descr"> <a name="details"></a>
<p>This example shows how to create a reusable switch component in QML.</p>
<p>The code for this example can be found in the <code>examples/quick/customitems/slideswitch</code> directory.</p>
<p>The objects that compose the switch are:</p>
<ul>
<li>a <code>on</code> property (the interface to interact with the switch),</li>
<li>two images (the background image and the knob),</li>
<li>two mouse regions for user interation (on the background image and on the knob),</li>
<li>two states (an <i>on</i> state and an <i>off</i> state),</li>
<li>two functions or slots to react to the user interation (<code>toggle()</code> and <code>dorelease()</code>),</li>
<li>and a transition that describe how to go from one state to the other.</li>
</ul>
<a name="switch-qml"></a>
<h2 id="switch-qml">Switch.qml</h2>
<pre class="qml">import QtQuick 2.0
<span class="type"><a href="qml-qtquick-item.html">Item</a></span> {
<span class="name">id</span>: <span class="name">toggleswitch</span>
<span class="name">width</span>: <span class="name">background</span>.<span class="name">width</span>; <span class="name">height</span>: <span class="name">background</span>.<span class="name">height</span>
property <span class="type">bool</span> <span class="name">on</span>: <span class="number">false</span>
<span class="keyword">function</span> <span class="name">toggle</span>() {
<span class="keyword">if</span> (<span class="name">toggleswitch</span>.<span class="name">state</span> <span class="operator">==</span> <span class="string">"on"</span>)
<span class="name">toggleswitch</span>.<span class="name">state</span> <span class="operator">=</span> <span class="string">"off"</span>;
<span class="keyword">else</span>
<span class="name">toggleswitch</span>.<span class="name">state</span> <span class="operator">=</span> <span class="string">"on"</span>;
}
<span class="keyword">function</span> <span class="name">releaseSwitch</span>() {
<span class="keyword">if</span> (<span class="name">knob</span>.<span class="name">x</span> <span class="operator">==</span> <span class="number">1</span>) {
<span class="keyword">if</span> (<span class="name">toggleswitch</span>.<span class="name">state</span> <span class="operator">==</span> <span class="string">"off"</span>) <span class="keyword">return</span>;
}
<span class="keyword">if</span> (<span class="name">knob</span>.<span class="name">x</span> <span class="operator">==</span> <span class="number">78</span>) {
<span class="keyword">if</span> (<span class="name">toggleswitch</span>.<span class="name">state</span> <span class="operator">==</span> <span class="string">"on"</span>) <span class="keyword">return</span>;
}
<span class="name">toggle</span>();
}
<span class="type"><a href="qml-qtquick-image.html">Image</a></span> {
<span class="name">id</span>: <span class="name">background</span>
<span class="name">source</span>: <span class="string">"background.png"</span>
<span class="type"><a href="qml-qtquick-mousearea.html">MouseArea</a></span> { <span class="name">anchors</span>.fill: <span class="name">parent</span>; <span class="name">onClicked</span>: <span class="name">toggle</span>() }
}
<span class="type"><a href="qml-qtquick-image.html">Image</a></span> {
<span class="name">id</span>: <span class="name">knob</span>
<span class="name">x</span>: <span class="number">1</span>; <span class="name">y</span>: <span class="number">2</span>
<span class="name">source</span>: <span class="string">"knob.png"</span>
<span class="type"><a href="qml-qtquick-mousearea.html">MouseArea</a></span> {
<span class="name">anchors</span>.fill: <span class="name">parent</span>
<span class="name">drag</span>.target: <span class="name">knob</span>; <span class="name">drag</span>.axis: <span class="name">Drag</span>.<span class="name">XAxis</span>; <span class="name">drag</span>.minimumX: <span class="number">1</span>; <span class="name">drag</span>.maximumX: <span class="number">78</span>
<span class="name">onClicked</span>: <span class="name">toggle</span>()
<span class="name">onReleased</span>: <span class="name">releaseSwitch</span>()
}
}
<span class="name">states</span>: [
<span class="type"><a href="qml-qtquick-state.html">State</a></span> {
<span class="name">name</span>: <span class="string">"on"</span>
<span class="type"><a href="qml-qtquick-propertychanges.html">PropertyChanges</a></span> { <span class="name">target</span>: <span class="name">knob</span>; <span class="name">x</span>: <span class="number">78</span> }
<span class="type"><a href="qml-qtquick-propertychanges.html">PropertyChanges</a></span> { <span class="name">target</span>: <span class="name">toggleswitch</span>; <span class="name">on</span>: <span class="number">true</span> }
},
<span class="type"><a href="qml-qtquick-state.html">State</a></span> {
<span class="name">name</span>: <span class="string">"off"</span>
<span class="type"><a href="qml-qtquick-propertychanges.html">PropertyChanges</a></span> { <span class="name">target</span>: <span class="name">knob</span>; <span class="name">x</span>: <span class="number">1</span> }
<span class="type"><a href="qml-qtquick-propertychanges.html">PropertyChanges</a></span> { <span class="name">target</span>: <span class="name">toggleswitch</span>; <span class="name">on</span>: <span class="number">false</span> }
}
]
<span class="name">transitions</span>: <span class="name">Transition</span> {
<span class="type"><a href="qml-qtquick-numberanimation.html">NumberAnimation</a></span> { <span class="name">properties</span>: <span class="string">"x"</span>; <span class="name">easing</span>.type: <span class="name">Easing</span>.<span class="name">InOutQuad</span>; <span class="name">duration</span>: <span class="number">200</span> }
}
}</pre>
<a name="walkthrough"></a>
<h2 id="walkthrough">Walkthrough</h2>
<a name="interface"></a>
<h3 >Interface</h3>
<pre class="qml"> property <span class="type">bool</span> <span class="name">on</span>: <span class="number">false</span></pre>
<p>This property is the interface of the switch. By default, the switch is off and this property is <code>false</code>. It can be used to activate/deactivate the switch or to query its current state.</p>
<p>In this example:</p>
<pre class="qml"><span class="type"><a href="qml-qtquick-item.html">Item</a></span> {
<span class="type">Switch</span> {
<span class="name">id</span>: <span class="name">mySwitch</span>
<span class="name">on</span>: <span class="number">true</span>
}
<span class="type"><a href="qml-qtquick-text.html">Text</a></span> {
<span class="name">text</span>: <span class="string">"The switch is on"</span>
<span class="name">visible</span>: <span class="name">mySwitch</span>.<span class="name">on</span> <span class="operator">==</span> <span class="number">true</span>
}
}</pre>
<p>the text will only be visible when the switch is on.</p>
<a name="images-and-user-interaction"></a>
<h3 >Images and user interaction</h3>
<pre class="qml"> <span class="type"><a href="qml-qtquick-image.html">Image</a></span> {
<span class="name">id</span>: <span class="name">background</span>
<span class="name">source</span>: <span class="string">"background.png"</span>
<span class="type"><a href="qml-qtquick-mousearea.html">MouseArea</a></span> { <span class="name">anchors</span>.fill: <span class="name">parent</span>; <span class="name">onClicked</span>: <span class="name">toggle</span>() }
}</pre>
<p>First, we create the background image of the switch. In order for the switch to toggle when the user clicks on the background, we add a <a href="qml-qtquick-mousearea.html">MouseArea</a> as a child item of the image. A <code>MouseArea</code> has a <code>onClicked</code> property that is triggered when the item is clicked. For the moment we will just call a <code>toggle()</code> function. We will see what this function does in a moment.</p>
<pre class="qml"> <span class="type"><a href="qml-qtquick-image.html">Image</a></span> {
<span class="name">id</span>: <span class="name">knob</span>
<span class="name">x</span>: <span class="number">1</span>; <span class="name">y</span>: <span class="number">2</span>
<span class="name">source</span>: <span class="string">"knob.png"</span>
<span class="type"><a href="qml-qtquick-mousearea.html">MouseArea</a></span> {
<span class="name">anchors</span>.fill: <span class="name">parent</span>
<span class="name">drag</span>.target: <span class="name">knob</span>; <span class="name">drag</span>.axis: <span class="name">Drag</span>.<span class="name">XAxis</span>; <span class="name">drag</span>.minimumX: <span class="number">1</span>; <span class="name">drag</span>.maximumX: <span class="number">78</span>
<span class="name">onClicked</span>: <span class="name">toggle</span>()
<span class="name">onReleased</span>: <span class="name">releaseSwitch</span>()
}
}</pre>
<p>Then, we place the image of the knob on top of the background. The interaction here is a little more complex. We want the knob to move with the finger when it is clicked. That is what the <code>drag</code> property of the <code>MouseArea</code> is for. We also want to toggle the switch if the knob is released between state. We handle this case in the <code>dorelease()</code> function that is called in the <code>onReleased</code> property.</p>
<a name="states"></a>
<h3 >States</h3>
<pre class="qml"> <span class="name">states</span>: [
<span class="type"><a href="qml-qtquick-state.html">State</a></span> {
<span class="name">name</span>: <span class="string">"on"</span>
<span class="type"><a href="qml-qtquick-propertychanges.html">PropertyChanges</a></span> { <span class="name">target</span>: <span class="name">knob</span>; <span class="name">x</span>: <span class="number">78</span> }
<span class="type"><a href="qml-qtquick-propertychanges.html">PropertyChanges</a></span> { <span class="name">target</span>: <span class="name">toggleswitch</span>; <span class="name">on</span>: <span class="number">true</span> }
},
<span class="type"><a href="qml-qtquick-state.html">State</a></span> {
<span class="name">name</span>: <span class="string">"off"</span>
<span class="type"><a href="qml-qtquick-propertychanges.html">PropertyChanges</a></span> { <span class="name">target</span>: <span class="name">knob</span>; <span class="name">x</span>: <span class="number">1</span> }
<span class="type"><a href="qml-qtquick-propertychanges.html">PropertyChanges</a></span> { <span class="name">target</span>: <span class="name">toggleswitch</span>; <span class="name">on</span>: <span class="number">false</span> }
}
]</pre>
<p>We define the two states of the switch:</p>
<ul>
<li>In the <i>on</i> state the knob is on the right (<code>x</code> position is 78) and the <code>on</code> property is <code>true</code>.</li>
<li>In the <i>off</i> state the knob is on the left (<code>x</code> position is 1) and the <code>on</code> property is <code>false</code>.</li>
</ul>
<p>For more information on states see <a href="qtquick-statesanimations-states.html">Qt Quick States</a>.</p>
<a name="functions"></a>
<h3 >Functions</h3>
<p>We add two JavaScript functions to our switch:</p>
<pre class="qml"> <span class="keyword">function</span> <span class="name">toggle</span>() {
<span class="keyword">if</span> (<span class="name">toggleswitch</span>.<span class="name">state</span> <span class="operator">==</span> <span class="string">"on"</span>)
<span class="name">toggleswitch</span>.<span class="name">state</span> <span class="operator">=</span> <span class="string">"off"</span>;
<span class="keyword">else</span>
<span class="name">toggleswitch</span>.<span class="name">state</span> <span class="operator">=</span> <span class="string">"on"</span>;
}</pre>
<p>This first function is called when the background image or the knob are clicked. We simply want the switch to toggle between the two states (<i>on</i> and <i>off</i>).</p>
<pre class="qml"> <span class="keyword">function</span> <span class="name">releaseSwitch</span>() {
<span class="keyword">if</span> (<span class="name">knob</span>.<span class="name">x</span> <span class="operator">==</span> <span class="number">1</span>) {
<span class="keyword">if</span> (<span class="name">toggleswitch</span>.<span class="name">state</span> <span class="operator">==</span> <span class="string">"off"</span>) <span class="keyword">return</span>;
}
<span class="keyword">if</span> (<span class="name">knob</span>.<span class="name">x</span> <span class="operator">==</span> <span class="number">78</span>) {
<span class="keyword">if</span> (<span class="name">toggleswitch</span>.<span class="name">state</span> <span class="operator">==</span> <span class="string">"on"</span>) <span class="keyword">return</span>;
}
<span class="name">toggle</span>();
}</pre>
<p>This second function is called when the knob is released and we want to make sure that the knob does not end up between states (neither <i>on</i> nor <i>off</i>). If it is the case call the <code>toggle()</code> function otherwise we do nothing.</p>
<p>For more information on scripts see JavaScript Expressions in QML Documents.</p>
<a name="transition"></a>
<h3 >Transition</h3>
<pre class="qml"> <span class="name">transitions</span>: <span class="name">Transition</span> {
<span class="type"><a href="qml-qtquick-numberanimation.html">NumberAnimation</a></span> { <span class="name">properties</span>: <span class="string">"x"</span>; <span class="name">easing</span>.type: <span class="name">Easing</span>.<span class="name">InOutQuad</span>; <span class="name">duration</span>: <span class="number">200</span> }
}</pre>
<p>At this point, when the switch toggles between the two states the knob will instantly change its <code>x</code> position between 1 and 78. In order for the knob to move smoothly we add a transition that will animate the <code>x</code> property with an easing curve for a duration of 200ms.</p>
<p>For more information on transitions see <a href="qtquick-statesanimations-animations.html">Animation and Transitions in Qt Quick</a>.</p>
<a name="usage"></a>
<h2 id="usage">Usage</h2>
<p>The switch can be used in a QML file, like this:</p>
<pre class="qml"> <span class="type">Switch</span> { <span class="name">anchors</span>.centerIn: <span class="name">parent</span>; <span class="name">on</span>: <span class="number">false</span> }</pre>
</div>
<!-- @@@qmlexampletoggleswitch.html -->
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2015 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>
|