Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Using QML Flow to place QML elements

From Wiki
Jump to: navigation, search

This code snippet shows how to use the QML element Flow to position child elements.

Article Metadata
Tested with
Devices(s): Nokia 900
Platform(s): S60 5th Edition
Maemo, Qt 4.7
S60 5th Edition
Keywords: QML, Flow
Created: kratsan (24 Jun 2010)
Last edited: hamishwillee (17 Oct 2012)



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.


  • Qt 4.7 or higher is installed on your platform.



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 }


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.

This page was last modified on 17 October 2012, at 06:17.
99 page views in the last 30 days.