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 Umdreh-Effekt zu erzeugen.

Die Eigenschaften „ front “ und „ back “ dienen dazu, die Elemente zu speichern, die jeweils auf der Vorder- und Rückseite des umblätterbaren Elements angezeigt werden.

Anwendungsbeispiel

Das folgende Beispiel zeigt ein „Flipable“-Element, das sich bei jedem Klick um die y-Achse dreht.

Dieses umklappbare Element verfügt über eine boolesche Eigenschaft „ flipped “, die umgeschaltet wird, sobald auf das Element „ MouseArea “ innerhalb des umklappbaren Elements geklickt wird. Wenn „ flipped “ auf „true“ gesetzt ist, wechselt das Element in den Zustand „back“; in diesem Zustand wird der Wert von „ angle “ des Elements „ Rotation “ auf 180 Grad geändert, um den Umdrehungseffekt zu erzeugen. Wenn „ flipped “ auf „false“ gesetzt ist, kehrt das Element in den Standardzustand zurück, in dem der Wert von „ angle “ 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
    }
}

Die Eigenschaft „ Transition “ erzeugt die Animation, die den Winkel über vier Sekunden hinweg verändert. Wenn das Element zwischen seinem „back“-Zustand und dem Standardzustand wechselt, animiert die Eigenschaft „ 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 “; weitere Informationen zur Funktionsweise von Animationen innerhalb von Übergängen finden Sie unter „Animation und Übergänge in Qt Quick “.

Siehe auch „UI-Komponenten: Beispiel für ‚Flipable‘“.

Eigenschaftsdokumentation

Die Vorder- und Rückseite des umklappbaren Teils.

side : enumeration [read-only]

Die derzeit sichtbare Seite des „Flipable“. Mögliche Werte sind „ Flipable.Front “ und „ Flipable.Back “.