×
Namespaces

Variants
Actions

ListView with tilting items

From Nokia Developer 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.
32 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.

×