Using QML Flow to place QML elements

From Nokia Developer 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.
90 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.


Thank you!

We appreciate your feedback.