/usr/share/qt5/doc/qtquick/qtquick-positioning-layouts.html is in qtdeclarative5-doc-html 5.2.1-3ubuntu15.
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 | <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en_US" lang="en_US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- layouts.qdoc -->
<title>Item Positioners | QtQuick 5.2</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.2</li>
<li><a href="qtquick-index.html">Qt Quick</a></li>
<li>Item Positioners</li>
<li id="buildversion">
Qt 5.2.1 Reference Documentation</li>
</ul>
</div>
</div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#positioners">Positioners</a></li>
<li class="level2"><a href="#column">Column</a></li>
<li class="level2"><a href="#row">Row</a></li>
<li class="level2"><a href="#grid">Grid</a></li>
<li class="level2"><a href="#flow">Flow</a></li>
<li class="level1"><a href="#other-ways-to-position-items">Other Ways to Position Items</a></li>
</ul>
</div>
<h1 class="title">Item Positioners</h1>
<span class="subtitle"></span>
<!-- $$$qtquick-positioning-layouts.html-description -->
<div class="descr"> <a name="details"></a>
<p>Positioner items are container items that manage the positions of items in a declarative user interface. Positioners behave in a similar way to the layout managers used with standard Qt widgets, except that they are also containers in their own right.</p>
<p>Positioners make it easier to work with many items when they need to be arranged in a regular layout.</p>
<p>Qt Quick Layouts can also be used to arrange Qt Quick items in a user interface. They manage both the positions and the sizes of items on a declarative user interface, and are well suited for resizable user interfaces.</p>
<a name="positioners"></a>
<h2>Positioners</h2>
<p>A set of standard positioners are provided in the basic set of Qt Quick graphical types:</p>
<a name="column"></a>
<h3>Column</h3>
<div class="float-right"><p><img src="images/qml-column.png" alt="" /></p>
</div><p><a href="qml-qtquick-column.html">Column</a> items are used to vertically arrange items. The following example uses a Column item to arrange three <a href="qml-qtquick-rectangle.html">Rectangle</a> items in an area defined by an outer <a href="qml-qtquick-item.html">Item</a>. The <a href="qml-qtquick-column.html#spacing-prop">spacing</a> property is set to include a small amount of space between the rectangles.</p>
<pre class="qml">import QtQuick 2.0
<span class="type"><a href="qml-qtquick-item.html">Item</a></span> {
<span class="name">width</span>: <span class="number">310</span>; <span class="name">height</span>: <span class="number">170</span>
<span class="type"><a href="qml-qtquick-column.html">Column</a></span> {
<span class="name">anchors</span>.horizontalCenter: <span class="name">parent</span>.<span class="name">horizontalCenter</span>
<span class="name">anchors</span>.verticalCenter: <span class="name">parent</span>.<span class="name">verticalCenter</span>
<span class="name">spacing</span>: <span class="number">5</span>
<span class="type"><a href="qml-qtquick-rectangle.html">Rectangle</a></span> { <span class="name">color</span>: <span class="string">"lightblue"</span>; <span class="name">radius</span>: <span class="number">10.0</span>
<span class="name">width</span>: <span class="number">300</span>; <span class="name">height</span>: <span class="number">50</span>
<span class="type"><a href="qml-qtquick-text.html">Text</a></span> { <span class="name">anchors</span>.centerIn: <span class="name">parent</span>
<span class="name">font</span>.pointSize: <span class="number">24</span>; <span class="name">text</span>: <span class="string">"Books"</span> } }
<span class="type"><a href="qml-qtquick-rectangle.html">Rectangle</a></span> { <span class="name">color</span>: <span class="string">"gold"</span>; <span class="name">radius</span>: <span class="number">10.0</span>
<span class="name">width</span>: <span class="number">300</span>; <span class="name">height</span>: <span class="number">50</span>
<span class="type"><a href="qml-qtquick-text.html">Text</a></span> { <span class="name">anchors</span>.centerIn: <span class="name">parent</span>
<span class="name">font</span>.pointSize: <span class="number">24</span>; <span class="name">text</span>: <span class="string">"Music"</span> } }
<span class="type"><a href="qml-qtquick-rectangle.html">Rectangle</a></span> { <span class="name">color</span>: <span class="string">"lightgreen"</span>; <span class="name">radius</span>: <span class="number">10.0</span>
<span class="name">width</span>: <span class="number">300</span>; <span class="name">height</span>: <span class="number">50</span>
<span class="type"><a href="qml-qtquick-text.html">Text</a></span> { <span class="name">anchors</span>.centerIn: <span class="name">parent</span>
<span class="name">font</span>.pointSize: <span class="number">24</span>; <span class="name">text</span>: <span class="string">"Movies"</span> } }
}
}</pre>
<p>Note that, since Column inherits directly from Item, any background color must be added to a parent Rectangle, if desired.</p>
<a name="row"></a>
<h3>Row</h3>
<div class="float-right"><p><img src="images/qml-row.png" alt="" /></p>
</div><p><a href="qml-qtquick-row.html">Row</a> items are used to horizontally arrange items. The following example uses a Row item to arrange three rounded <a href="qml-qtquick-rectangle.html">Rectangle</a> items in an area defined by an outer colored Rectangle. The <a href="qml-qtquick-row.html#spacing-prop">spacing</a> property is set to include a small amount of space between the rectangles.</p>
<p>We ensure that the parent Rectangle is large enough so that there is some space left around the edges of the horizontally centered Row item.</p>
<pre class="qml">import QtQuick 2.0
<span class="type"><a href="qml-qtquick-rectangle.html">Rectangle</a></span> {
<span class="name">width</span>: <span class="number">320</span>; <span class="name">height</span>: <span class="number">110</span>
<span class="name">color</span>: <span class="string">"#c0c0c0"</span>
<span class="type"><a href="qml-qtquick-row.html">Row</a></span> {
<span class="name">anchors</span>.horizontalCenter: <span class="name">parent</span>.<span class="name">horizontalCenter</span>
<span class="name">anchors</span>.verticalCenter: <span class="name">parent</span>.<span class="name">verticalCenter</span>
<span class="name">spacing</span>: <span class="number">5</span>
<span class="type"><a href="qml-qtquick-rectangle.html">Rectangle</a></span> { <span class="name">width</span>: <span class="number">100</span>; <span class="name">height</span>: <span class="number">100</span>; <span class="name">radius</span>: <span class="number">20.0</span>
<span class="name">color</span>: <span class="string">"#024c1c"</span> }
<span class="type"><a href="qml-qtquick-rectangle.html">Rectangle</a></span> { <span class="name">width</span>: <span class="number">100</span>; <span class="name">height</span>: <span class="number">100</span>; <span class="name">radius</span>: <span class="number">20.0</span>
<span class="name">color</span>: <span class="string">"#42a51c"</span> }
<span class="type"><a href="qml-qtquick-rectangle.html">Rectangle</a></span> { <span class="name">width</span>: <span class="number">100</span>; <span class="name">height</span>: <span class="number">100</span>; <span class="name">radius</span>: <span class="number">20.0</span>
<span class="name">color</span>: <span class="string">"white"</span> }
}
}</pre>
<a name="grid"></a>
<h3>Grid</h3>
<div class="float-right"><p><img src="images/qml-grid-spacing.png" alt="" /></p>
</div><p><a href="qml-qtquick-grid.html">Grid</a> items are used to place items in a grid or table arrangement. The following example uses a Grid item to place four <a href="qml-qtquick-rectangle.html">Rectangle</a> items in a 2-by-2 grid. As with the other positioners, the spacing between items can be specified using the <a href="qml-qtquick-grid.html#spacing-prop">spacing</a> property.</p>
<pre class="qml">import QtQuick 2.0
<span class="type"><a href="qml-qtquick-rectangle.html">Rectangle</a></span> {
<span class="name">width</span>: <span class="number">112</span>; <span class="name">height</span>: <span class="number">112</span>
<span class="name">color</span>: <span class="string">"#303030"</span>
<span class="type"><a href="qml-qtquick-grid.html">Grid</a></span> {
<span class="name">anchors</span>.horizontalCenter: <span class="name">parent</span>.<span class="name">horizontalCenter</span>
<span class="name">anchors</span>.verticalCenter: <span class="name">parent</span>.<span class="name">verticalCenter</span>
<span class="name">columns</span>: <span class="number">2</span>
<span class="name">spacing</span>: <span class="number">6</span>
<span class="type"><a href="qml-qtquick-rectangle.html">Rectangle</a></span> { <span class="name">color</span>: <span class="string">"#aa6666"</span>; <span class="name">width</span>: <span class="number">50</span>; <span class="name">height</span>: <span class="number">50</span> }
<span class="type"><a href="qml-qtquick-rectangle.html">Rectangle</a></span> { <span class="name">color</span>: <span class="string">"#aaaa66"</span>; <span class="name">width</span>: <span class="number">50</span>; <span class="name">height</span>: <span class="number">50</span> }
<span class="type"><a href="qml-qtquick-rectangle.html">Rectangle</a></span> { <span class="name">color</span>: <span class="string">"#9999aa"</span>; <span class="name">width</span>: <span class="number">50</span>; <span class="name">height</span>: <span class="number">50</span> }
<span class="type"><a href="qml-qtquick-rectangle.html">Rectangle</a></span> { <span class="name">color</span>: <span class="string">"#6666aa"</span>; <span class="name">width</span>: <span class="number">50</span>; <span class="name">height</span>: <span class="number">50</span> }
}
}</pre>
<p>There is no difference between horizontal and vertical spacing inserted between items, so any additional space must be added within the items themselves.</p>
<p>Any empty cells in the grid must be created by defining placeholder items at the appropriate places in the Grid definition.</p>
<a name="flow"></a>
<h3>Flow</h3>
<div class="float-right"><p><img src="images/qml-flow-text1.png" alt="" /> <img src="images/qml-flow-text2.png" alt="" /></p>
</div><p><a href="qml-qtquick-flow.html">Flow</a> items are used to place items like words on a page, with rows or columns of non-overlapping items.</p>
<p>Flow items arrange items in a similar way to <a href="qml-qtquick-grid.html">Grid</a> items, with items arranged in lines along one axis (the minor axis), and lines of items placed next to each other along another axis (the major axis). The direction of flow, as well as the spacing between items, are controlled by the <a href="qml-qtquick-flow.html#flow-prop">flow</a> and <a href="qml-qtquick-flow.html#spacing-prop">spacing</a> properties.</p>
<p>The following example shows a Flow item containing a number of <a href="qml-qtquick-text.html">Text</a> child items. These are arranged in a similar way to those shown in the screenshots.</p>
<pre class="qml">import QtQuick 2.0
<span class="type"><a href="qml-qtquick-rectangle.html">Rectangle</a></span> {
<span class="name">color</span>: <span class="string">"lightblue"</span>
<span class="name">width</span>: <span class="number">300</span>; <span class="name">height</span>: <span class="number">200</span>
<span class="type"><a href="qml-qtquick-flow.html">Flow</a></span> {
<span class="name">anchors</span>.fill: <span class="name">parent</span>
<span class="name">anchors</span>.margins: <span class="number">4</span>
<span class="name">spacing</span>: <span class="number">10</span>
<span class="type"><a href="qml-qtquick-text.html">Text</a></span> { <span class="name">text</span>: <span class="string">"Text"</span>; <span class="name">font</span>.pixelSize: <span class="number">40</span> }
<span class="type"><a href="qml-qtquick-text.html">Text</a></span> { <span class="name">text</span>: <span class="string">"items"</span>; <span class="name">font</span>.pixelSize: <span class="number">40</span> }
<span class="type"><a href="qml-qtquick-text.html">Text</a></span> { <span class="name">text</span>: <span class="string">"flowing"</span>; <span class="name">font</span>.pixelSize: <span class="number">40</span> }
<span class="type"><a href="qml-qtquick-text.html">Text</a></span> { <span class="name">text</span>: <span class="string">"inside"</span>; <span class="name">font</span>.pixelSize: <span class="number">40</span> }
<span class="type"><a href="qml-qtquick-text.html">Text</a></span> { <span class="name">text</span>: <span class="string">"a"</span>; <span class="name">font</span>.pixelSize: <span class="number">40</span> }
<span class="type"><a href="qml-qtquick-text.html">Text</a></span> { <span class="name">text</span>: <span class="string">"Flow"</span>; <span class="name">font</span>.pixelSize: <span class="number">40</span> }
<span class="type"><a href="qml-qtquick-text.html">Text</a></span> { <span class="name">text</span>: <span class="string">"item"</span>; <span class="name">font</span>.pixelSize: <span class="number">40</span> }
}
}</pre>
<p>The main differences between the Grid and Flow positioners are that items inside a Flow will wrap when they run out of space on the minor axis, and items on one line may not be aligned with items on another line if the items do not have uniform sizes. As with Grid items, there is no independent control of spacing between items and between lines of items.</p>
<a name="other-ways-to-position-items"></a>
<h2>Other Ways to Position Items</h2>
<p>There are several other ways to position items in a user interface. In addition to the basic technique of specifying their coordinates directly, they can be positioned relative to other items with <a href="qtquick-positioning-anchors.html#anchor-layout">anchors</a>, or used with <a href="qtquick-modelviewsdata-modelview.html#qml-data-models">QML Data Models</a> such as <a href="qtquick-modelviewsdata-modelview.html#visualitemmodel">VisualItemModel</a>.</p>
</div>
<!-- @@@qtquick-positioning-layouts.html -->
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2013 Digia Plc and/or its
subsidiaries. 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> Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. </p>
</div>
</body>
</html>
|