Flipable QML Type

Fournit une surface qui peut être retournée. Plus d'informations...

• Liste de tous les membres, y compris les membres hérités

Propriétés

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

Description détaillée

Flipable est un élément qui peut être visiblement "retourné" entre son recto et son verso, comme une carte. Il peut être utilisé avec les types Rotation, State et Transition pour produire un effet de retournement.

Les propriétés front et back sont utilisées pour contenir les éléments qui sont affichés respectivement au recto et au verso de l'élément retournable.

Exemple d'utilisation

L'exemple suivant montre un élément flipable qui se retourne chaque fois que l'on clique dessus, en pivotant autour de l'axe y.

Cet élément flipable possède une propriété booléenne flipped qui est activée chaque fois que l'on clique sur le site MouseArea à l'intérieur de l'élément flipable. Lorsque flipped est vrai, l'élément passe à l'état "retour" ; dans cet état, le angle de l'élément Rotation est modifié à 180 degrés pour produire l'effet de retournement. Lorsque flipped est faux, l'élément revient à l'état par défaut, dans lequel la valeur angle est égale à 0.

import QtQuick

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
    }
}

La page Transition crée l'animation qui modifie l'angle sur une période de quatre secondes. Lorsque l'élément passe de l'état "retour" à l'état par défaut, la valeur NumberAnimation anime l'angle entre son ancienne et sa nouvelle valeur.

Voir Qt Quick States pour plus de détails sur les changements d'état et l'état par défaut, et Animation et transitions dans Qt Quick pour plus d'informations sur le fonctionnement des animations dans les transitions.

Voir aussi Composants de l'interface utilisateur : Flipable Exemple.

Documentation sur les propriétés

Les faces avant et arrière du flipable.

side : enumeration [read-only]

Le côté du Flipable actuellement visible. Les valeurs possibles sont Flipable.Front et Flipable.Back.