Qt
Internal/Contributor docs for the Qt SDK. Note: These are NOT official API docs; those are found at https://doc.qt.io/
Loading...
Searching...
No Matches
layouts.qdoc
Go to the documentation of this file.
1
// Copyright (C) 2017 The Qt Company Ltd.
2
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
3
4
/*!
5
\page qtquick-positioning-layouts.html
6
\title Item Positioners
7
8
Positioner items are container items that manage the positions of
9
items in a declarative user interface. Positioners behave in a similar way to
10
the \l{Qt Widgets}{layout managers} used with standard Qt widgets,
11
except that they are also containers in their own right.
12
13
Positioners make it easier to work with many items when they need
14
to be arranged in a regular layout.
15
16
\l{Qt Quick Layouts} can also be used to arrange Qt Quick items in a user interface.
17
They manage both the positions and the sizes of items on a declarative user interface,
18
and are well suited for resizable user interfaces.
19
20
\section1 Positioners
21
22
A set of standard positioners are provided in the basic set of Qt Quick
23
graphical types:
24
25
\annotatedlist qtquick-positioners
26
27
\section2 Column Items
28
29
\div {class="float-right"}
30
\inlineimage qml-column.png
31
\enddiv
32
33
\l Column items are used to vertically arrange items. The following example
34
uses a Column item to arrange three \l Rectangle items in an area defined
35
by an outer \l Item. The \l{Column::spacing}{spacing} property is set to
36
include a small amount of space between the rectangles.
37
38
\snippet qml/column/column.qml document
39
40
Note that, since Column inherits directly from Item, any background color
41
must be added to a parent Rectangle, if desired.
42
43
\section2 Row Items
44
45
\div {class="float-right"}
46
\inlineimage qml-row.png
47
\enddiv
48
49
\l Row items are used to horizontally arrange items. The following example
50
uses a Row item to arrange three rounded \l Rectangle items in an area defined
51
by an outer colored Rectangle. The \l{Row::spacing}{spacing} property is set to
52
include a small amount of space between the rectangles.
53
54
We ensure that the parent Rectangle is large enough so that there is some space
55
left around the edges of the horizontally centered Row item.
56
57
\snippet qml/row.qml document
58
59
\section2 Grid Items
60
61
\div {class="float-right"}
62
\inlineimage qml-grid-spacing.png
63
\enddiv
64
65
\l Grid items are used to place items in a grid or table arrangement.
66
The following example uses a Grid item to place four \l Rectangle items
67
in a 2-by-2 grid. As with the other positioners, the spacing between items
68
can be specified using the \l{Grid::spacing}{spacing} property.
69
70
\snippet qml/grid-spacing.qml document
71
72
There is no difference between horizontal and vertical spacing inserted
73
between items, so any additional space must be added within the items
74
themselves.
75
76
Any empty cells in the grid must be created by defining placeholder items
77
at the appropriate places in the Grid definition.
78
79
\section2 Flow Items
80
81
\div {class="float-right"}
82
\inlineimage qml-flow-text1.png
83
\inlineimage qml-flow-text2.png
84
\enddiv
85
86
\l Flow items are used to place items like words on a page, with rows or
87
columns of non-overlapping items.
88
89
Flow items arrange items in a similar way to \l Grid items, with items
90
arranged in lines along one axis (the minor axis), and lines of items
91
placed next to each other along another axis (the major axis). The
92
direction of flow, as well as the spacing between items, are controlled
93
by the \l{Flow::}{flow} and \l{Flow::}{spacing} properties.
94
95
The following example shows a Flow item containing a number of \l Text
96
child items. These are arranged in a similar way to those shown in the
97
screenshots.
98
99
\snippet qml/flow.qml document
100
101
The main differences between the Grid and Flow positioners are that items
102
inside a Flow will wrap when they run out of space on the minor axis, and
103
items on one line may not be aligned with items on another line if the
104
items do not have uniform sizes. As with Grid items, there is no independent
105
control of spacing between items and between lines of items.
106
107
\section1 Other Ways to Position Items
108
109
There are several other ways to position items in a user interface. In addition
110
to the basic technique of specifying their coordinates directly, they can be
111
positioned relative to other items with \l{anchor-layout}{anchors}, or used
112
with \l{QML Data Models} such as \l{QML Data Models#Object Model}{Object Model}.
113
*/
qtdeclarative
src
quick
doc
src
concepts
positioning
layouts.qdoc
Generated on Sat Sep 28 2024 01:06:01 for Qt by
1.12.0