内容

• 特性
• 详细描述
• 用法范例

Flipable QML Type

Provides a surface that can be flipped 更多...

• 所有成员列表，包括继承成员

特性

• back : Item
• front : Item
• side : enumeration

详细描述

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

front and back properties are used to hold the items that are shown respectively on the front and back sides of the flipable item.

用法范例

The following example shows a Flipable item that flips whenever it is clicked, rotating about the y-axis.

This flipable item has a flipped boolean property that is toggled whenever the MouseArea within the flipable is clicked. When flipped is true, the item changes to the "back" state; in this state, the angle 的 Rotation item is changed to 180 degrees to produce the flipping effect. When flipped is false, the item reverts to the default state, in which the angle value is 0.

import QtQuick 2.0
Flipable {
    id: flipable
    width: 240
    height: 240
    property bool flipped: false
    front: Image { source: "front.png"; anchors.centerIn: parent }
    back: Image { source: "back.png"; anchors.centerIn: parent }
    transform: Rotation {
        id: rotation
        origin.x: flipable.width/2
        origin.y: flipable.height/2
        axis.x: 0; axis.y: 1; axis.z: 0     // set axis.y to 1 to rotate around y-axis
        angle: 0    // the default angle
    }
    states: State {
        name: "back"
        PropertyChanges { target: rotation; angle: 180 }
        when: flipable.flipped
    }
    transitions: Transition {
        NumberAnimation { target: rotation; property: "angle"; duration: 4000 }
    }
    MouseArea {
        anchors.fill: parent
        onClicked: flipable.flipped = !flipable.flipped
    }
}