1// Copyright (C) 2017 The Qt Company Ltd.
2// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
5\page qtquick-positioning-layouts.html
8Positioner items are container items that manage the positions of
9items in a declarative user interface. Positioners behave in a similar way to
10the \l{Qt Widgets}{layout managers} used with standard Qt widgets,
11except that they are also containers in their own right.
13Positioners make it easier to work with many items when they need
14to be arranged in a regular layout.
16\l{Qt Quick Layouts} can also be used to arrange Qt Quick items in a user interface.
17They manage both the positions and the sizes of items on a declarative user interface,
18and are well suited for resizable user interfaces.
22A set of standard positioners are provided in the basic set of Qt Quick
25\annotatedlist qtquick-positioners
29\div {class="float-right"}
30\inlineimage qml-column.png
33\l Column items are used to vertically arrange items. The following example
34uses a Column item to arrange three \l Rectangle items in an area defined
35by an outer \l Item. The \l{Column::spacing}{spacing} property is set to
36include a small amount of space between the rectangles.
38\snippet qml/column/column.qml document
40Note that, since Column inherits directly from Item, any background color
41must be added to a parent Rectangle, if desired.
45\div {class="float-right"}
46\inlineimage qml-row.png
49\l Row items are used to horizontally arrange items. The following example
50uses a Row item to arrange three rounded \l Rectangle items in an area defined
51by an outer colored Rectangle. The \l{Row::spacing}{spacing} property is set to
52include a small amount of space between the rectangles.
54We ensure that the parent Rectangle is large enough so that there is some space
55left around the edges of the horizontally centered Row item.
57\snippet qml/row.qml document
61\div {class="float-right"}
62\inlineimage qml-grid-spacing.png
65\l Grid items are used to place items in a grid or table arrangement.
66The following example uses a Grid item to place four \l Rectangle items
67in a 2-by-2 grid. As with the other positioners, the spacing between items
68can be specified using the \l{Grid::spacing}{spacing} property.
70\snippet qml/grid-spacing.qml document
72There is no difference between horizontal and vertical spacing inserted
73between items, so any additional space must be added within the items
76Any empty cells in the grid must be created by defining placeholder items
77at the appropriate places in the Grid definition.
81\div {class="float-right"}
82\inlineimage qml-flow-text1.png
83\inlineimage qml-flow-text2.png
86\l Flow items are used to place items like words on a page, with rows or
87columns of non-overlapping items.
89Flow items arrange items in a similar way to \l Grid items, with items
90arranged in lines along one axis (the minor axis), and lines of items
91placed next to each other along another axis (the major axis). The
92direction of flow, as well as the spacing between items, are controlled
93by the \l{Flow::}{flow} and \l{Flow::}{spacing} properties.
95The following example shows a Flow item containing a number of \l Text
96child items. These are arranged in a similar way to those shown in the
99\snippet qml/flow.qml document
101The main differences between the Grid and Flow positioners are that items
102inside a Flow will wrap when they run out of space on the minor axis, and
103items on one line may not be aligned with items on another line if the
104items do not have uniform sizes. As with Grid items, there is no independent
105control of spacing between items and between lines of items.
107\section1 Other Ways to Position Items
109There are several other ways to position items in a user interface. In addition
110to the basic technique of specifying their coordinates directly, they can be
111positioned relative to other items with \l{anchor-layout}{anchors}, or used
112with \l{QML Data Models} such as \l{QML Data Models#Object Model}{Object Model}.