FlipableItem QML Type

Provides a surface that can be flipped. More...

• List of all members, including inherited members

Properties

• flipAngle : alias
• flipped : bool
• opacityBack : real
• opacityFront : real
• rotationalAxis : int

Detailed Description

A Flipable type can be visibly flipped between its front and back sides, like a card. The front and back sides are specified by using any two types inside the Flipable type. The type with the higher z-order is the front side. The opacityFront and opacityBack properties are used to hide and show either the front or back side of the item at a time.

The flipAngle property is used to animate the angle of the type to produce the flipping effect. The value of the rotationalAxis property determines which axis the type is rotated around.

Example Usage

You can use the Flipable component in Qt Design Studio to create an item that can be flipped.

The QML code looks as follows:

FlipableItem {
    id: flipable
    x: 595
    y: 277
    width: 493
    height: 493
    opacityFront: 1
    opacityBack: 0.09412
    flipAngle: 45
    rotationalAxis: 1

    TriangleItem {
        id: triangle
        x: 122
        y: 122
        width: 250
        height: 250
        opacity: 1
        z: 0
        strokeWidth: 10
        fillColor: "#6cff9f"
        rotation: -270
    }

    TriangleItem {
        id: triangle1
        x: 16
        y: 122
        width: 250
        height: 250
        strokeWidth: 10
        rotation: 270
        fillColor: "#6cff9f"
    }
}

Property Documentation