<?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>Item Positioners | Qt Quick 5.12.6</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.12</td><td ><a href="qtquick-index.html">Qt Quick</a></td><td >Item Positioners</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right"><a href="qtquick-index.html">Qt 5.12.6 Reference Documentation</a></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="#positioners">Positioners</a></li>
<li class="level2"><a href="#column-items">Column Items</a></li>
<li class="level2"><a href="#row-items">Row Items</a></li>
<li class="level2"><a href="#grid-items">Grid Items</a></li>
<li class="level2"><a href="#flow-items">Flow Items</a></li>
<li class="level1"><a href="#other-ways-to-position-items">Other Ways to Position Items</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></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><a href="qtquicklayouts-index.html">Qt Quick Layouts</a> 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 id="positioners">Positioners</h2>
<p>A set of standard positioners are provided in the basic set of Qt Quick graphical types:</p>
<div class="table"><table class="annotated">
<tr class="odd topAlign"><td class="tblName"><p><a href="qml-qtquick-column.html">Column</a></p></td><td class="tblDescr"><p>Positions its children in a column</p></td></tr>
<tr class="even topAlign"><td class="tblName"><p><a href="qml-qtquick-flow.html">Flow</a></p></td><td class="tblDescr"><p>Positions its children side by side, wrapping as necessary</p></td></tr>
<tr class="odd topAlign"><td class="tblName"><p><a href="qml-qtquick-grid.html">Grid</a></p></td><td class="tblDescr"><p>Positions its children in grid formation</p></td></tr>
<tr class="even topAlign"><td class="tblName"><p><a href="qml-qtquick-layoutmirroring.html">LayoutMirroring</a></p></td><td class="tblDescr"><p>Property used to mirror layout behavior</p></td></tr>
<tr class="odd topAlign"><td class="tblName"><p><a href="qml-qtquick-positioner.html">Positioner</a></p></td><td class="tblDescr"><p>Provides attached properties that contain details on where an item exists in a positioner</p></td></tr>
<tr class="even topAlign"><td class="tblName"><p><a href="qml-qtquick-row.html">Row</a></p></td><td class="tblDescr"><p>Positions its children in a row</p></td></tr>
</table></div>
<a name="column-items"></a>
<h3 id="column-items">Column Items</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
Item {
width: 310; height: 170
Column {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
spacing: 5
Rectangle { color: "lightblue"; radius: 10.0
width: 300; height: 50
Text { anchors.centerIn: parent
font.pointSize: 24; text: "Books" } }
Rectangle { color: "gold"; radius: 10.0
width: 300; height: 50
Text { anchors.centerIn: parent
font.pointSize: 24; text: "Music" } }
Rectangle { color: "lightgreen"; radius: 10.0
width: 300; height: 50
Text { anchors.centerIn: parent
font.pointSize: 24; text: "Movies" } }
}
}
</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-items"></a>
<h3 id="row-items">Row Items</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
Rectangle {
width: 320; height: 110
color: "#c0c0c0"
Row {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
spacing: 5
Rectangle { width: 100; height: 100; radius: 20.0
color: "#024c1c" }
Rectangle { width: 100; height: 100; radius: 20.0
color: "#42a51c" }
Rectangle { width: 100; height: 100; radius: 20.0
color: "white" }
}
}
</pre>
<a name="grid-items"></a>
<h3 id="grid-items">Grid Items</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
Rectangle {
width: 112; height: 112
color: "#303030"
Grid {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
columns: 2
spacing: 6
Rectangle { color: "#aa6666"; width: 50; height: 50 }
Rectangle { color: "#aaaa66"; width: 50; height: 50 }
Rectangle { color: "#9999aa"; width: 50; height: 50 }
Rectangle { color: "#6666aa"; width: 50; height: 50 }
}
}
</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-items"></a>
<h3 id="flow-items">Flow Items</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
Rectangle {
color: "lightblue"
width: 300; height: 200
Flow {
anchors.fill: parent
anchors.margins: 4
spacing: 10
Text { text: "Text"; font.pixelSize: 40 }
Text { text: "items"; font.pixelSize: 40 }
Text { text: "flowing"; font.pixelSize: 40 }
Text { text: "inside"; font.pixelSize: 40 }
Text { text: "a"; font.pixelSize: 40 }
Text { text: "Flow"; font.pixelSize: 40 }
Text { text: "item"; font.pixelSize: 40 }
}
}
</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 id="other-ways-to-position-items">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">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#object-model">Object Model</a>.</p>
</div>
<!-- @@@qtquick-positioning-layouts.html -->
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2019 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>
distrib
>
Mageia
>
7
>
i586
>
media
>
core-updates
>
by-pkgid
>
6e2327ca1c896c6d674ae53117299f21
>
files
>
1584
