This file is indexed.

/usr/share/qt5/doc/qtdoc/qtquick-usecase-layouts.html is in qt5-doc-html 5.5.1-1.

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
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- layouts.qdoc -->
  <title>Use Case - Positioners and Layouts In QML | Qt 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><a href="index.html">Qt 5.5</a></li>
<li>Use Case - Positioners and Layouts In QML</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="#manual-positioning">Manual Positioning</a></li>
<li class="level1"><a href="#anchors">Anchors</a></li>
<li class="level1"><a href="#positioners">Positioners</a></li>
<li class="level1"><a href="#layout-types">Layout Types</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Use Case - Positioners and Layouts In QML</h1>
<span class="subtitle"></span>
<!-- $$$qtquick-usecase-layouts.html-description -->
<div class="descr"> <a name="details"></a>
<p>There are several ways to position items in QML.</p>
<p>Below is a brief overview. For more details, see <a href="../qtquick/qtquick-positioning-topic.html">Important Concepts In Qt Quick - Positioning</a>.</p>
<a name="manual-positioning"></a>
<h2 id="manual-positioning">Manual Positioning</h2>
<p>Items can be placed at specific x,y coordinates on the screen by setting their x,y properties. This will setup their position relative to the top left corner of their parent, according to the <a href="../qtquick/qtquick-visualcanvas-coordinates.html">visual coordinate system</a> rules.</p>
<p>Combined with using <a href="../qtqml/qtqml-syntax-propertybinding.html">bindings</a> instead of constant valudes for these properties, relative positioning is also easily accomplished by setting the x and y coordinates to the appropriate bindings.</p>
<pre class="qml">import QtQuick 2.3

<span class="type"><a href="../qtquick/qml-qtquick-item.html">Item</a></span> {
    <span class="name">width</span>: <span class="number">100</span>; <span class="name">height</span>: <span class="number">100</span>

    <span class="type"><a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a></span> {
        <span class="comment">// Manually positioned at 20,20</span>
        <span class="name">x</span>: <span class="number">20</span>
        <span class="name">y</span>: <span class="number">20</span>
        <span class="name">width</span>: <span class="number">80</span>
        <span class="name">height</span>: <span class="number">80</span>
        <span class="name">color</span>: <span class="string">&quot;red&quot;</span>
    }
}</pre>
<p class="centerAlign"><img src="images/qml-uses-layouts-direct.png" alt="" /></p><a name="anchors"></a>
<h2 id="anchors">Anchors</h2>
<p>The <code>Item</code> type provides the abilitiy to anchor to other <a href="../qtquick/qml-qtquick-item.html">Item</a> types. There are six anchor lines for each item: <i>left</i>, <i>right</i>, <i>vertical center</i>, <i>top</i>, <i>bottom</i> and <i>horizontal center</i>. The three vertical anchor lines can be anchored to any of the three vertical anchor lines of another item, and the three horizontal anchor lines can be anchored to the horizontal anchor lines of another item.</p>
<p>For full details, see <a href="../qtquick/qtquick-positioning-anchors.html">Positioning with Anchors</a> and the documentation of the <a href="../qtquick/qml-qtquick-item.html#anchors.top-prop">anchors property</a>.</p>
<pre class="qml">import QtQuick 2.3

<span class="type"><a href="../qtquick/qml-qtquick-item.html">Item</a></span> {
    <span class="name">width</span>: <span class="number">200</span>; <span class="name">height</span>: <span class="number">200</span>

    <span class="type"><a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a></span> {
        <span class="comment">// Anchored to 20px off the top right corner of the parent</span>
        <span class="name">anchors</span>.right: <span class="name">parent</span>.<span class="name">right</span>
        <span class="name">anchors</span>.top: <span class="name">parent</span>.<span class="name">top</span>
        <span class="name">anchors</span>.margins: <span class="number">20</span> <span class="comment">// Sets all margins at once</span>

        <span class="name">width</span>: <span class="number">80</span>
        <span class="name">height</span>: <span class="number">80</span>
        <span class="name">color</span>: <span class="string">&quot;orange&quot;</span>
    }

    <span class="type"><a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a></span> {
        <span class="comment">// Anchored to 20px off the top center corner of the parent.</span>
        <span class="comment">// Notice the different group property syntax for 'anchors' compared to</span>
        <span class="comment">// the previous Rectangle. Both are valid.</span>
        <span class="type">anchors</span> { <span class="name">horizontalCenter</span>: <span class="name">parent</span>.<span class="name">horizontalCenter</span>; <span class="name">top</span>: <span class="name">parent</span>.<span class="name">top</span>; <span class="name">topMargin</span>: <span class="number">20</span> }

        <span class="name">width</span>: <span class="number">80</span>
        <span class="name">height</span>: <span class="number">80</span>
        <span class="name">color</span>: <span class="string">&quot;green&quot;</span>
    }
}</pre>
<p class="centerAlign"><img src="images/qml-uses-layouts-anchors.png" alt="" /></p><a name="positioners"></a>
<h2 id="positioners">Positioners</h2>
<p>For the common case of wanting to <i>position</i> a set of types in a regular pattern, Qt Quick provides some positioner types. Items placed in a positioner are automatically positioned in some way; for example, a <a href="../qtquick/qtquick-positioning-layouts.html#row">Row</a> positions items to be horizontally adjacent (forming a row).</p>
<p>For full details see <a href="../qtquick/qtquick-positioning-layouts.html">Item Positioners</a> and the documentation for <a href="../qtpositioning/qtpositioning-qmlmodule.html">the positioner types</a>.</p>
<pre class="qml">import QtQuick 2.3

<span class="type"><a href="../qtquick/qml-qtquick-item.html">Item</a></span> {
    <span class="name">width</span>: <span class="number">300</span>; <span class="name">height</span>: <span class="number">100</span>

    <span class="type"><a href="../qtquick/qml-qtquick-row.html">Row</a></span> { <span class="comment">// The &quot;Row&quot; type lays out its child items in a horizontal line</span>
        <span class="name">spacing</span>: <span class="number">20</span> <span class="comment">// Places 20px of space between items</span>

        <span class="type"><a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a></span> { <span class="name">width</span>: <span class="number">80</span>; <span class="name">height</span>: <span class="number">80</span>; <span class="name">color</span>: <span class="string">&quot;red&quot;</span> }
        <span class="type"><a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a></span> { <span class="name">width</span>: <span class="number">80</span>; <span class="name">height</span>: <span class="number">80</span>; <span class="name">color</span>: <span class="string">&quot;green&quot;</span> }
        <span class="type"><a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a></span> { <span class="name">width</span>: <span class="number">80</span>; <span class="name">height</span>: <span class="number">80</span>; <span class="name">color</span>: <span class="string">&quot;blue&quot;</span> }
    }
}</pre>
<p class="centerAlign"><img src="images/qml-uses-layouts-positioners.png" alt="" /></p><a name="layout-types"></a>
<h2 id="layout-types">Layout Types</h2>
<p><i>Layout types</i> function in a similar way as positioners but allow further refinement or restrictions to the layout. Specifically, the layout types allow you to:</p>
<ul>
<li>set the alignment of text and other items</li>
<li>resize and fill the allotted application areas automatically</li>
<li>set size constraints such as minimum or maximum dimensions</li>
<li>set the spacing between items within the layout</li>
</ul>
<pre class="qml"><span class="type"><a href="../qtquickcontrols/qml-qtquick-controls-groupbox.html">GroupBox</a></span> {
    <span class="name">id</span>: <span class="name">gridBox</span>
    <span class="name">title</span>: <span class="string">&quot;Grid layout&quot;</span>
    <span class="name">Layout</span>.fillWidth: <span class="number">true</span>

    <span class="type"><a href="../qtquicklayouts/qml-qtquick-layouts-gridlayout.html">GridLayout</a></span> {
        <span class="name">id</span>: <span class="name">gridLayout</span>
        <span class="name">rows</span>: <span class="number">3</span>
        <span class="name">flow</span>: <span class="name">GridLayout</span>.<span class="name">TopToBottom</span>
        <span class="name">anchors</span>.fill: <span class="name">parent</span>
        <span class="type"><a href="../qtquickcontrols/qml-qtquick-controls-label.html">Label</a></span> { <span class="name">text</span>: <span class="string">&quot;Line 1&quot;</span> }
        <span class="type"><a href="../qtquickcontrols/qml-qtquick-controls-label.html">Label</a></span> { <span class="name">text</span>: <span class="string">&quot;Line 2&quot;</span> }
        <span class="type"><a href="../qtquickcontrols/qml-qtquick-controls-label.html">Label</a></span> { <span class="name">text</span>: <span class="string">&quot;Line 3&quot;</span> }

        <span class="type"><a href="../qtquickcontrols/qml-qtquick-controls-textfield.html">TextField</a></span> { }
        <span class="type"><a href="../qtquickcontrols/qml-qtquick-controls-textfield.html">TextField</a></span> { }
        <span class="type"><a href="../qtquickcontrols/qml-qtquick-controls-textfield.html">TextField</a></span> { }

        <span class="type"><a href="../qtquickcontrols/qml-qtquick-controls-textarea.html">TextArea</a></span> {
            <span class="name">text</span>: <span class="string">&quot;This widget spans over three rows in the GridLayout.\n&quot;</span>
                  <span class="operator">+</span> <span class="string">&quot;All items in the GridLayout are implicitly positioned from top to bottom.&quot;</span>
            <span class="name">Layout</span>.rowSpan: <span class="number">3</span>
            <span class="name">Layout</span>.fillHeight: <span class="number">true</span>
            <span class="name">Layout</span>.fillWidth: <span class="number">true</span>
        }
    }
}</pre>
<p>The snippet above comes from the <a href="../qtquickcontrols/qtquickcontrols-basiclayouts-example.html">Basic Layouts</a> example. The snippet shows the simplicity of adding various fields and items in a layout. The <a href="../qtquicklayouts/qml-qtquick-layouts-gridlayout.html">GridLayout</a> can be resized and its format are customizable through various properties.</p>
<p>For more information about the layout types, visit:</p>
<ul>
<li><a href="../qtquicklayouts/qtquicklayouts-overview.html">Qt Quick Layouts Overview</a></li>
<li><a href="../qtquickcontrols/qtquickcontrols-basiclayouts-example.html">Basic Layouts</a> example</li>
</ul>
<p><b>Note: </b><a href="../qtquicklayouts/qtquicklayouts-index.html">Qt Quick Layouts</a> was introduced in Qt 5.1 and requires <a href="../qtquick/qtquick-index.html">Qt Quick</a> 2.1&#x2e;</p></div>
<!-- @@@qtquick-usecase-layouts.html -->
        </div>
       </div>
   </div>
   </div>
</div>
<div class="footer">
   <p>
   <acronym title="Copyright">&copy;</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>