Using QML Flow to place QML elements
hamishwillee
(Talk | contribs) m (Text replace - "<code cpp>" to "<code cpp-qt>") |
hamishwillee
(Talk | contribs) m (Hamishwillee - Add Abstract. Improve categories) |
||
| Line 1: | Line 1: | ||
| + | [[Category:Qt]][[Category:Qt Quick]][[Category:MeeGo Harmattan]][[Category:Symbian]][[Category:UI]][[Category:Code Snippet]][[Category:S60 5th Edition]][[Category:Maemo]] | ||
| + | {{Abstract|This code snippet shows how to use the QML element {{Icode|Flow}} to position child elements.}} | ||
| + | |||
{{ArticleMetaData <!-- v1.2 --> | {{ArticleMetaData <!-- v1.2 --> | ||
|sourcecode= <!-- Link to example source code (e.g. [[Media:The Code Example ZIP.zip]]) --> | |sourcecode= <!-- Link to example source code (e.g. [[Media:The Code Example ZIP.zip]]) --> | ||
| Line 4: | Line 7: | ||
|devices= Nokia 900 | |devices= Nokia 900 | ||
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) --> | |sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) --> | ||
| − | |platform= S60 5th Edition<br>Maemo | + | |platform= S60 5th Edition<br>Maemo, Qt 4.7 |
|devicecompatability= <!-- Compatible devices (e.g.: All* (must have GPS) ) --> | |devicecompatability= <!-- Compatible devices (e.g.: All* (must have GPS) ) --> | ||
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 --> | |dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 --> | ||
| Line 21: | Line 24: | ||
|author= [[User:Kratsan]] | |author= [[User:Kratsan]] | ||
<!-- The following are not in current metadata --> | <!-- The following are not in current metadata --> | ||
| − | |||
|id= CS001612 | |id= CS001612 | ||
}} | }} | ||
==Overview== | ==Overview== | ||
| − | |||
| − | |||
{{Icode|Flow}} arranges its children side by side, wrapping as necessary. The following snippet places approximately 100 tiny rectangles inside the positioner. After this, the never-ending animation will adjust the width of {{Icode|Flow}} to make it continuously arrange its children. | {{Icode|Flow}} arranges its children side by side, wrapping as necessary. The following snippet places approximately 100 tiny rectangles inside the positioner. After this, the never-ending animation will adjust the width of {{Icode|Flow}} to make it continuously arrange its children. | ||
| Line 83: | Line 83: | ||
The {{Icode|Flow}} QML element is demonstrated by inserting a large amount of rectangles inside it and changing the width of {{Icode|Flow}} to make the rectangle positions rearrange continuously. | The {{Icode|Flow}} QML element is demonstrated by inserting a large amount of rectangles inside it and changing the width of {{Icode|Flow}} to make the rectangle positions rearrange continuously. | ||
| − | |||
| − | |||
Latest revision as of 09:17, 17 October 2012
This code snippet shows how to use the QML element Flow to position child elements.
Article Metadata
Tested with
Devices(s): Nokia 900
Compatibility
Platform(s): S60 5th Edition
Maemo, Qt 4.7
Maemo, Qt 4.7
Article
Keywords: QML, Flow
Created: kratsan
(24 Jun 2010)
Last edited: hamishwillee
(17 Oct 2012)
Contents |
Overview
Flow arranges its children side by side, wrapping as necessary. The following snippet places approximately 100 tiny rectangles inside the positioner. After this, the never-ending animation will adjust the width of Flow to make it continuously arrange its children.
The code snippet is meant to be run with qmlviewer.
Preconditions
- Qt 4.7 or higher is installed on your platform.
Source
ui.qml
import Qt 4.7
Rectangle {
width: 800; height: 480
color: "black"
Component.onCompleted: animation.start()
Flow {
id: flow
property real originalWidth: 790
x: 5; y: 5
width: originalWidth
spacing: 10
Repeater {
id: repeater
model: 104
Rectangle {
width: 20; height: 20
color: { var c = index / repeater.count; return Qt.rgba(1-c, c, c, 1) }
}
}
}
SequentialAnimation {
id: animation
loops: Animation.Infinite
PropertyAnimation { target: flow; property: "width"; to: 200; duration: 1000 }
PropertyAnimation { target: flow; property: "width"; to: flow.originalWidth; duration: 1000 }
}
}
Postconditions
The Flow QML element is demonstrated by inserting a large amount of rectangles inside it and changing the width of Flow to make the rectangle positions rearrange continuously.
