Flipable QML Type

Bietet eine Oberfläche, die umgedreht werden kann. Mehr...

• Liste aller Mitglieder, einschließlich geerbter Mitglieder

Eigenschaften

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

Ausführliche Beschreibung

Flipable ist ein Element, das wie eine Karte sichtbar zwischen seiner Vorder- und Rückseite "umgedreht" werden kann. Es kann zusammen mit den Typen Rotation, State und Transition verwendet werden, um einen Kippeffekt zu erzeugen.

Die Eigenschaften front und back werden verwendet, um die Elemente zu speichern, die auf der Vorder- bzw. Rückseite des umklappbaren Elements angezeigt werden.

Beispielverwendung

Das folgende Beispiel zeigt ein Flipable-Element, das sich um die y-Achse dreht, wenn es angeklickt wird.

Dieses Flipable-Element verfügt über eine boolesche Eigenschaft flipped, die umgeschaltet wird, wenn auf MouseArea innerhalb des Flipable-Elements geklickt wird. Wenn flipped wahr ist, wechselt das Element in den Zustand "zurück"; in diesem Zustand wird angle des Elements Rotation um 180 Grad geändert, um den Kippeffekt zu erzeugen. Wenn flipped falsch ist, kehrt das Element in den Standardzustand zurück, in dem der angle Wert 0 ist.

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

Transition erstellt die Animation, die den Winkel über vier Sekunden ändert. Wenn das Element zwischen dem "Zurück"- und dem Standardzustand wechselt, animiert NumberAnimation den Winkel zwischen dem alten und dem neuen Wert.

Weitere Informationen zu Zustandsänderungen und dem Standardzustand finden Sie unter Qt Quick Zustände und zur Funktionsweise von Animationen innerhalb von Übergängen unter Qt Quick Animation und Übergänge.

Siehe auch UI Components: Flipable Beispiel.

Dokumentation der Eigenschaft