×
Namespaces

Variants
Actions
Revision as of 09:17, 17 October 2012 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

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
Compatibility
Platform(s): S60 5th Edition
Maemo, Qt 4.7
Symbian
S60 5th Edition
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.

This page was last modified on 17 October 2012, at 09:17.
82 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.

×