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
|
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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" />
<!-- qdeclarativepositioners.cpp -->
<title>Qt 4.8: QML Flow Element</title>
<link rel="stylesheet" type="text/css" href="style/offline.css" />
</head>
<body>
<div class="header" id="qtdocheader">
<div class="content">
<a href="index.html" class="qtref"><span>Qt Reference Documentation</span></a>
</div>
<div class="breadcrumb toolblock">
<ul>
<li class="first"><a href="index.html">Home</a></li>
<!-- Breadcrumbs go here -->
<li><a href="qdeclarativeelements.html">QML Elements</a></li>
<li>QML Flow Element</li>
</ul>
</div>
</div>
<div class="content mainContent">
<p class="naviNextPrevious headerNavi">
</p><p/>
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#properties">Properties</a></li>
<li class="level1"><a href="#details">Detailed Description</a></li>
<li class="level2"><a href="#example-usage">Example Usage</a></li>
<li class="level2"><a href="#using-transitions">Using Transitions</a></li>
<li class="level2"><a href="#limitations">Limitations</a></li>
</ul>
</div>
<h1 class="title">QML Flow Element</h1>
<span class="subtitle"></span>
<!-- $$$Flow-brief -->
<p>The Flow item arranges its children side by side, wrapping as necessary. <a href="#details">More...</a></p>
<!-- @@@Flow -->
<p>Inherits <a href="qml-item.html">Item</a></p>
<p>This element was introduced in Qt 4.7.</p>
<ul>
<li><a href="qml-flow-members.html">List of all members, including inherited members</a></li>
</ul>
<a name="properties"></a>
<h2>Properties</h2>
<ul>
<li class="fn"><b><b><a href="qml-flow.html#add-prop">add</a></b></b> : Transition</li>
<li class="fn"><b><b><a href="qml-flow.html#flow-prop">flow</a></b></b> : enumeration</li>
<li class="fn"><b><b><a href="qml-flow.html#layoutDirection-prop">layoutDirection</a></b></b> : enumeration</li>
<li class="fn"><b><b><a href="qml-flow.html#move-prop">move</a></b></b> : Transition</li>
<li class="fn"><b><b><a href="qml-flow.html#spacing-prop">spacing</a></b></b> : int</li>
</ul>
<!-- $$$Flow-description -->
<a name="details"></a>
<h2>Detailed Description</h2>
<p>The Flow item positions its child items like words on a page, wrapping them to create rows or columns of items that do not overlap.</p>
<p>Spacing between items can be added using the <a href="qml-flow.html#spacing-prop">spacing</a> property. Transitions can be used for cases where items managed by a Column are added or moved. These are stored in the <a href="qml-flow.html#add-prop">add</a> and <a href="qml-flow.html#move-prop">move</a> properties respectively.</p>
<p>See <a href="qml-positioners.html">Using QML Positioner and Repeater Items</a> for more details about this item and other related items.</p>
<a name="example-usage"></a>
<h2>Example Usage</h2>
<p>The following example positions <a href="qml-text.html">Text</a> items within a parent item using a Flow item.</p>
<p class="centerAlign"><img src="images/qml-flow-snippet.png" alt="" /></p><pre class="qml"> <span class="type">Flow</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-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-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-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-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-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-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-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>
<a name="using-transitions"></a>
<h2>Using Transitions</h2>
<p>Transitions can be used to animate items that are added to, moved within, or removed from a Flow item. The <a href="qml-flow.html#add-prop">add</a> and <a href="qml-flow.html#move-prop">move</a> properties can be set to the transitions that will be applied when items are added to, removed from, or re-positioned within a Flow item.</p>
<p>The use of transitions with positioners is described in more detail in the <a href="qml-positioners.html#using-transitions">Using QML Positioner and Repeater Items</a> document.</p>
<a name="limitations"></a>
<h2>Limitations</h2>
<p>Note that the positioner assumes that the x and y positions of its children will not change. If you manually change the x or y properties in script, bind the x or y properties, use anchors on a child of a positioner, or have the width or height of a child depend on the position of a child, then the positioner may exhibit strange behaviour. If you need to perform any of these actions, consider positioning the items without the use of a Flow.</p>
<p>Items with a width or height of 0 will not be positioned.</p>
<p><b>See also </b><a href="qml-column.html">Column</a>, <a href="qml-row.html">Row</a>, <a href="qml-grid.html">Grid</a>, and <a href="declarative-positioners.html">Positioners example</a>.</p>
<!-- @@@Flow -->
<h2>Property Documentation</h2>
<!-- $$$add -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="add-prop"></a><span class="name">add</span> : <span class="type"><a href="qml-transition.html">Transition</a></span></p></td></tr></table></div><div class="qmldoc"><p>This property holds the transition to be applied when adding an item to the positioner. The transition will only be applied to the added item(s). Positioner transitions will only affect the position (x, y) of items.</p>
<p>For a positioner, adding an item can mean that either the object has been created or reparented, and thus is now a child or the positioner, or that the object has had its opacity increased from zero, and thus is now visible.</p>
<p><b>See also </b><a href="qml-flow.html#move-prop">move</a>.</p>
</div></div><!-- @@@add -->
<br/>
<!-- $$$flow -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="flow-prop"></a><span class="name">flow</span> : <span class="type"><a href="qml-enumeration.html">enumeration</a></span></p></td></tr></table></div><div class="qmldoc"><p>This property holds the flow of the layout.</p>
<p>Possible values are:</p>
<ul>
<li>Flow.LeftToRight (default) - Items are positioned next to to each other according to the <a href="qml-flow.html#layoutDirection-prop">layoutDirection</a> until the width of the Flow is exceeded, then wrapped to the next line.</li>
<li>Flow.TopToBottom - Items are positioned next to each other from top to bottom until the height of the Flow is exceeded, then wrapped to the next column.</li>
</ul>
</div></div><!-- @@@flow -->
<br/>
<!-- $$$layoutDirection -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="layoutDirection-prop"></a><span class="name">layoutDirection</span> : <span class="type"><a href="qml-enumeration.html">enumeration</a></span></p></td></tr></table></div><div class="qmldoc"><p>This property holds the layout direction of the layout.</p>
<p>Possible values are:</p>
<ul>
<li>Qt.LeftToRight (default) - Items are positioned from the top to bottom, and left to right. The flow direction is dependent on the <a href="qml-flow.html#flow-prop">Flow::flow</a> property.</li>
<li>Qt.RightToLeft - Items are positioned from the top to bottom, and right to left. The flow direction is dependent on the <a href="qml-flow.html#flow-prop">Flow::flow</a> property.</li>
</ul>
<p>When using the attached property <a href="qml-layoutmirroring.html#enabled-prop">LayoutMirroring::enabled</a> for locale layouts, the visual layout direction of the flow positioner will be mirrored. However, the property <tt>layoutDirection</tt> will remain unchanged. You can use the property <a href="qml-layoutmirroring.html#enabled-prop">LayoutMirroring::enabled</a> to determine whether the direction has been mirrored.</p>
<p>This property group was introduced in QtQuick 1.1.</p>
<p><b>See also </b><a href="qml-grid.html#layoutDirection-prop">Grid::layoutDirection</a>, <a href="qml-row.html#layoutDirection-prop">Row::layoutDirection</a>, <a href="declarative-righttoleft-layoutdirection.html">Layout directions example</a>, and <a href="qml-layoutmirroring.html">LayoutMirroring</a>.</p>
</div></div><!-- @@@layoutDirection -->
<br/>
<!-- $$$move -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="move-prop"></a><span class="name">move</span> : <span class="type"><a href="qml-transition.html">Transition</a></span></p></td></tr></table></div><div class="qmldoc"><p>This property holds the transition to be applied when moving an item within the positioner. Positioner transitions will only affect the position (x, y) of items.</p>
<p>This transition can be performed when other items are added or removed from the positioner, or when items resize themselves.</p>
<pre class="qml"> <span class="type"><a href="qml-flow.html">Flow</a></span> {
<span class="name">id</span>: <span class="name">positioner</span>
<span class="name">move</span>: <span class="name">Transition</span> {
<span class="type"><a href="qml-numberanimation.html">NumberAnimation</a></span> {
<span class="name">properties</span>: <span class="string">"x,y"</span>
<span class="name">ease</span>: <span class="string">"easeOutBounce"</span>
}
}
}</pre>
<p><b>See also </b><a href="qml-flow.html#add-prop">add</a> and <a href="declarative-positioners.html">Positioners example</a>.</p>
</div></div><!-- @@@move -->
<br/>
<!-- $$$spacing -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="spacing-prop"></a><span class="name">spacing</span> : <span class="type"><a href="qml-int.html">int</a></span></p></td></tr></table></div><div class="qmldoc"><p>spacing is the amount in pixels left empty between each adjacent item, and defaults to 0.</p>
<p><b>See also </b><a href="qml-grid.html#spacing-prop">Grid::spacing</a>.</p>
</div></div><!-- @@@spacing -->
<br/>
<p class="naviNextPrevious footerNavi">
</p>
<div class="ft">
<span></span>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2012 Nokia Corporation and/or its
subsidiaries. Documentation contributions included herein are the copyrights of
their respective owners.</p>
<br />
<p>
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.</p>
<p>
Documentation sources may be obtained from <a href="http://www.qt-project.org">
www.qt-project.org</a>.</p>
<br />
<p>
Nokia, Qt and their respective logos are trademarks of Nokia Corporation
in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. <a title="Privacy Policy"
href="http://en.gitorious.org/privacy_policy/">Privacy Policy</a></p>
</div>
</body>
</html>
|
