Creating Flipable UI in Qt Quick

Comments

(no comments yet)

Log in or Join to leave comments.

This article shows how to use the QML Flipable element.

Article Metadata

---

Code Example

Source file: Media:FlipableUI.zip

---

Article

Created: jaydipNokia (19 Jun 2011)

Last edited: hamishwillee (13 Jun 2012)

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

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.