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.

Perspective 3D List view

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.

<mediaplayer>http://www.youtube.com/watch?v=LuQg_TGq-oY</mediaplayer>

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 04:34.
44 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.

×