×
Namespaces

Variants
Actions
(Difference between revisions)

Using QML Flow to place QML elements

From Nokia Developer Wiki
Jump to: navigation, search
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 -->
|subcategory= Qt Quick
 
 
|id= CS001612
 
|id= CS001612
 
}}
 
}}
  
 
==Overview==
 
==Overview==
 
This code snippet shows how to use the QML element {{Icode|Flow}} to position child elements.
 
  
 
{{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.
 
[[Category:Qt]][[Category: Qt Quick]][[Category:Code Snippet]][[Category:Code Snippet]][[Category:MeeGo Harmattan]] [[Category:Symbian]]
 

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
Symbian
S60 5th Edition
Article
Keywords: QML, Flow
Created: kratsan (24 Jun 2010)
Last edited: hamishwillee (17 Oct 2012)

Contents

[edit] 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.

[edit] Preconditions

  • Qt 4.7 or higher is installed on your platform.

[edit] 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 }
}
}

[edit] 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.
81 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.

×