Namespaces

Variants
Actions

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 over the next few weeks. Thanks for all your past and future contributions.

ListView with tilting items

From Wiki
Jump to: navigation, search

Introduction

QML provides pretty basic elements which can be used to display items in grids, lists or in more complex patterns. In this example I would like to show you how to customize a standard ListView, adding some 3D effects that make it more eye-candy.

The media player is loading...

Code

Here you can find the QML code shown in the video. To run this code you can simply copy the following QML lines in a file and run it using QMLViewer.

import Qt 4.7
 
Rectangle {
id: background
 
width: 800; height: 480
Behavior on color { ColorAnimation { duration: 200 } }
color: "black"
 
Text {
text: "Forum Nokia"
color: "white"
anchors.centerIn: parent
}
 
Flickable {
id: flickable
property real rectAngle: 0
 
anchors.fill: parent
contentWidth: flickable.width * repeater.count;
contentHeight: flickable.height
 
Behavior on scale {
SpringAnimation { spring: 2; damping: 0.3; }
}
 
onFlickStarted: {
//console.log("flick start " + flickable.horizontalVelocity );
flickable.scale = 0.5
flickable.smooth = true
 
if (flickable.horizontalVelocity == 0)
flickable.rectAngle = 0
else if (flickable.horizontalVelocity > 0)
flickable.rectAngle = 45
else
flickable.rectAngle = -45
}
 
onFlickEnded: {
//console.log("flick end");
flickable.rectAngle = 0
flickable.scale = 1.0
flickable.smooth = true
}
 
Row {
id: myRow
spacing: 5
 
Repeater {
id: repeater
model: 10
 
 
Rectangle {
id: rectItem
width: flickable.width;
height: flickable.height;
color: "gray"
 
Text {
anchors.centerIn: parent
text: "Loren Ipsum"
rotation: 45
 
}
 
Rectangle {
id: rectItemShadow
width: flickable.width
height: 50
anchors.top: rectItem.bottom
//color: "red"
 
gradient: Gradient {
GradientStop { position: 0.0; color: rectItem.color }
GradientStop { position: 1.0; color: "transparent" }
}
 
}
 
transform: Rotation {
id: rot
origin.x: rectItem.width /2
origin.y: rectItem.height /2
axis.x:0
axis.y:1
axis.z:0
angle: flickable.rectAngle
Behavior on angle {
SpringAnimation { spring: 2; damping: 0.3; modulus: 360 }
}
}
}
}
 
}
 
}
}


Article Metadata
Compatibility
Platform(s): Qt 4.7 and later
Symbian
Device(s): All
Article
Keywords: Qt, QML, 3D, ListView, tilting items
Created: gnuton (15 5, 2011)
Last edited: hamishwillee (30 Jan 2013)
This page was last modified on 30 January 2013, at 04:34.
35 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.

×