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.

Sliding 3D QML ListView

From Wiki
Jump to: navigation, search

This article shows how to add 3D effects to a QML ListView. The example uses gradient shading and scaling to give the appearance that the list is a 3D shape that moves into the background when the list is scrolled. The media player is loading...

Article Metadata
Platform(s): Qt 4.7 and later
Device(s): All Qt 4.7 and later
Keywords: Qt, QML, 3D, ListView, Sliding
Created: gnuton (29 Jun 2011)
Last edited: hamishwillee (30 Jan 2013)

Source code

Here you can find the QML code shown in the video. To run this code you can simply copy the following lines in a QML app project.

import Qt 4.7
Rectangle {
id: background
width: 800; height: 480
Behavior on color { ColorAnimation { duration: 200 } }
color: "black"
Text {
text: "Nokia Developer"
color: "white"
anchors.horizontalCenter: parent.horizontalCenter
anchors.topMargin: 10
ListView {
id: flickable
anchors.fill: parent
contentHeight: flickable.height
orientation: "Horizontal"
cacheBuffer: flickable.width * (1 / flickable.scale)
snapMode: ListView.SnapToItem
spacing: 5
model: 10
Behavior on scale {
SpringAnimation { spring: 2; damping: 0.3; }
onFlickStarted: {
//console.log("flick start " + flickable.horizontalVelocity );
flickable.scale = 0.5
onMovementEnded: {
flickable.scale = 1.0
onFlickEnded: {
//console.log("flick end");
flickable.scale = 1.0
delegate: Rectangle {
id: rectItem
width: flickable.width;
height: flickable.height;
color: "gray"
Text {
anchors.centerIn: parent
text: "Loren Ipsum"
rotation: 45
Rectangle {
id: rectItemShadow
width: rectItem.width
height: 100 rectItem.bottom
gradient: Gradient {
GradientStop { position: 0.0; color: rectItem.color }
GradientStop { position: 0.5; color: "transparent" }
Text {
id: pageNumber
text: index
color: "red"
anchors.bottom: rectItemShadow.bottom
anchors.right: rectItemShadow.right
anchors.rightMargin: font.pixelSize / 2
font.pointSize: rectItem.height / 5
visible: (flickable.scale != 1)
This page was last modified on 30 January 2013, at 04:33.
79 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.