×
Namespaces

Variants
Actions

Perspective 3D List view

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.top: parent.top
anchors.horizontalCenter: parent.horizontalCenter
anchors.topMargin: 10
}
 
Rectangle{
color: "transparent"
anchors.fill: parent
 
ListView {
id: flickable
anchors.fill: parent
property int maxAngle : 30
//contentWidth: flickable.width * repeater.count;
contentHeight: flickable.height
orientation: "Horizontal"
 
cacheBuffer: { flickable.width * 2; }
property real angle: 0
snapMode: ListView.SnapToItem
spacing: 5
model: 20
 
Behavior on angle {
SpringAnimation { spring: 1; damping: 0.5;}
 
}
 
onFlickStarted: {
//console.log("flick start " + flickable.horizontalVelocity );
//flickable.scale = 0.5
//flickable.angle = -20
flickable.angle = (flickable.horizontalVelocity > 0) ? maxAngle : -maxAngle;
 
}
 
onMovementEnded: {
//flickable.scale = 1.0
flickable.angle = 0
 
}
onFlickEnded: {
//console.log("flick end");
//flickable.scale = 1.0
flickable.angle = 0
}
 
delegate: Rectangle {
id: rectItem
width: flickable.width;
height: flickable.height;
color: "gray"
 
Text {
anchors.centerIn: parent
text: "Loren Ipsum"
rotation: 45
 
}
}
}
 
transform: Rotation {
//property int aaa : 0
origin.x: { (flickable.angle > 0)? 0 : flickable.width; }
//origin.x: flickable.width
origin.y: flickable.height /2
axis.x:0
axis.y:1
axis.z:0
angle: flickable.angle
}
 
} //BIG RECTANGLE
}


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

×