Flipable QML Type

Fournit une surface pouvant être retournée. En savoir plus…

• 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 « retourné » de manière visible entre son recto et son verso, à l'instar d'une carte. Il peut être utilisé conjointement avec les types Rotation, State et Transition pour produire un effet de retournement.

Les propriétés front et back servent à contenir les éléments affichés respectivement sur le recto et le verso de l'élément « flipable ».

Exemple d’utilisation

L’exemple suivant montre un élément « Flipable » qui bascule lorsqu’on clique dessus, en pivotant autour de l’axe y.

Cet élément « flipable » dispose d’une propriété booléenne « flipped » qui est activée ou désactivée chaque fois que l’on clique sur l’élément « MouseArea » situé à l’intérieur de l’élément « flipable ». Lorsque « flipped » est défini sur « true », l’élément passe à l’état « back » ; dans cet état, la valeur « angle » de l’élément « Rotation » est modifiée à 180 degrés pour produire l’effet de retournement. Lorsque « flipped » est défini sur « false », 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 propriété « Transition » crée l’animation qui modifie l’angle en quatre secondes. Lorsque l’élément passe de son état « back » à son état par défaut, la propriété « NumberAnimation » anime la transition de l’angle entre ses anciennes et nouvelles valeurs.

Consultez la section « États de l’Qt Quick » pour plus de détails sur les changements d’état et l’état par défaut, ainsi que la section « Animation et transitions dans Qt Quick » pour plus d’informations sur le fonctionnement des animations au sein des transitions.

Voir également Composants de l’interface utilisateur : exemple de composant « Flipable ».

Documentation sur les propriétés

Le recto et le verso de l'objet réversible.

side : enumeration [read-only]

Côté du « Flipable » actuellement visible. Les valeurs possibles sont : « Flipable.Front » et « Flipable.Back ».