Using QML Flow to place QML elements

Article Metadata

---

Tested with

Devices(s): Nokia 900

---

Compatibility

Platform(s): S60 5th Edition
Maemo

---

Article

Keywords: QML, Flow

Created: kratsan (24 Jun 2010)

Last edited: hamishwillee (11 Oct 2012)

Overview

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

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.