×
Namespaces

Variants
Actions

Creating Flipable UI in Qt Quick

From Nokia Developer Wiki
Jump to: navigation, search

This article shows how to use the QML Flipable element.

Article Metadata
Code ExampleCompatibility
Platform(s):
Symbian
Article
Created: jaydipNokia (19 Jun 2011)
Last edited: hamishwillee (13 Jun 2012)

Contents

Introduction

The Flipable item provides a surface that can be flipped. Flipable is an item that can be visibly "flipped" between its front and back sides, like a card. It is used together with Rotation, State and Transition elements to produce a flipping effect.

The following example shows a Flipable item that flips whenever it is clicked.

Screen Shot

FnFlip.jpg NdFlip.jpg

Main.qml File

The front and back properties are used to hold the items that are shown respectively on the front and back sides of the flipable item. You can add more control on Front and back sides like Button, Text, and Image Element etc.

 
import QtQuick 1.0
Rectangle {
id: rect
width: 640; height: 320
color: "lightsteelblue"
Flipable {
id: sign
property bool frontSide: true
anchors.centerIn: parent
width: 243; height: 230
MouseArea {
anchors.fill: parent
onClicked: sign.frontSide = !sign.frontSide
z: -1
}
transform: Rotation {
origin.x: sign.width / 2; origin.y: sign.height / 2
axis.x: 1; axis.y: 0; axis.z: 0
angle: sign.frontSide ? 0 : 180
Behavior on angle {
RotationAnimation {
direction: RotationAnimation.Clockwise
easing.type: Easing.InOutCubic; duration: 300
}
}
}
front: Image {
anchors.fill: parent
source: "img/FN12.png"
smooth: true
// you can add button control here
// you can also add text QMl Element here
}
back: Image {
anchors.fill: parent
source: "img/ND1.png"
smooth: true
// you can add button control here
// you can also add text QMl Element here
}
}
}

Source Code

You can download Sample code from File:FlipableUI.zip.

This page was last modified on 13 June 2012, at 13:52.
59 page views in the last 30 days.