Flipable QML Type

Proporciona una superficie que se puede voltear. Más...

• Lista de todos los miembros, incluidos los heredados

Propiedades

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

Descripción detallada

Flipable es un elemento que puede "voltearse" visiblemente entre su anverso y su reverso, como una tarjeta. Puede utilizarse junto con los tipos Rotation, State y Transition para producir un efecto de volteo.

Las propiedades front y back se utilizan para contener los elementos que se muestran respectivamente en el anverso y el reverso del elemento flipable.

Ejemplo de uso

El siguiente ejemplo muestra un elemento Flipable que gira alrededor del eje y cada vez que se hace clic sobre él.

Este elemento abatible tiene una propiedad booleana flipped que se activa cada vez que se hace clic en MouseArea dentro del elemento abatible. Cuando flipped es verdadero, el elemento cambia al estado "atrás"; en este estado, el angle del elemento Rotation se cambia a 180 grados para producir el efecto de volteo. Cuando flipped es falso, el elemento vuelve al estado por defecto, en el que el valor de angle es 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
    }
}

Transition crea la animación que cambia el ángulo a lo largo de cuatro segundos. Cuando el elemento cambia entre sus estados "atrás" y por defecto, el NumberAnimation anima el ángulo entre sus valores antiguo y nuevo.

Consulta Qt Quick States para más detalles sobre los cambios de estado y el estado por defecto, y Animation and Transitions en Qt Quick para más información sobre cómo funcionan las animaciones dentro de las transiciones.

Ver también Componentes UI: Ejemplo de Flipable.

Documentación de propiedades

Las caras delantera y trasera del flipable.

side : enumeration [read-only]

El lado del Flipable actualmente visible. Los valores posibles son Flipable.Front y Flipable.Back.