×
Namespaces

Variants
Actions

Sliding 3D QML ListView

From Nokia Developer 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
Compatibility
Platform(s): Qt 4.7 and later
Symbian
Device(s): All Qt 4.7 and later
Article
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.top: parent.top
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
anchors.top: 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.
60 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.

×