Qt Quick Estados

Tipos relacionados

Muchos diseños de interfaz de usuario se basan en estados; las interfaces tienen configuraciones que difieren dependiendo del estado actual. Por ejemplo, una señal de tráfico configurará sus banderas o luces dependiendo de su estado. En el estado stop de la señal, se encenderá una luz roja mientras que las luces amarilla y verde se apagarán. En el estado caution, la luz amarilla está encendida mientras que las otras luces están apagadas.

En QML, los estados son un conjunto de configuraciones de propiedades definidas en un tipo State. Diferentes configuraciones podrían, por ejemplo

• Mostrar algunos componentes de la interfaz de usuario y ocultar otros
• Presentar al usuario diferentes acciones disponibles
• Iniciar, detener o pausar animaciones
• Ejecutar algún script necesario en el nuevo estado
• Cambiar el valor de una propiedad de un elemento concreto
• Mostrar una vista o pantalla diferente

Todos los objetos basados en Item tienen una propiedad state, y pueden especificar estados adicionales añadiendo nuevos objetos State a la propiedad states del elemento. Cada estado dentro de un componente tiene un único name, siendo una cadena vacía el valor por defecto. Para cambiar el estado actual de un elemento, establezca la propiedad state con el nombre del estado.

Los objetos que no son ítems pueden utilizar estados a través del tipo StateGroup.

Creación de estados

Para crear un estado, añada un objeto State a la propiedad states del elemento, que contiene una lista de estados para ese elemento.

Un componente de advertencia signal puede tener dos estados, el estado NORMAL y el estado CRITICAL. Supongamos que en el estado NORMAL, el color de la señal debe ser green y el aviso flag está caído. Mientras tanto, en el estado CRITICAL, el color debe ser red y la bandera es up. Podemos modelar los estados utilizando el tipo State y las configuraciones de color y bandera con el tipo PropertyChanges.

Rectangle {
    id: signal
    width: 200; height: 200
    state: "NORMAL"

    states: [
        State {
            name: "NORMAL"
            PropertyChanges { signal.color: "green"}
            PropertyChanges { flag.state: "FLAG_DOWN"}
        },
        State {
            name: "CRITICAL"
            PropertyChanges { signal.color: "red"}
            PropertyChanges { flag.state: "FLAG_UP"}
        }
    ]
}

El tipo PropertyChanges cambiará los valores de las propiedades de los objetos. Los objetos se referencian a través de su id. Los objetos externos al componente también se referencian utilizando la propiedad id, ejemplificada por el cambio de propiedad al objeto externo flag.

Además, el estado puede cambiar asignando la propiedad state con el estado de señal apropiado. Un interruptor de estado podría ser del tipo MouseArea, asignando un estado diferente cada vez que la señal recibe un clic del ratón.

Rectangle {
    id: signalswitch
    width: 75; height: 75
    color: "blue"

    MouseArea {
        anchors.fill: parent
        onClicked: {
            if (signal.state == "NORMAL")
                signal.state = "CRITICAL"
            else
                signal.state = "NORMAL"
        }
    }
}

El tipo Estado no se limita a realizar modificaciones en los valores de las propiedades. También puede

• Ejecutar algún script utilizando StateChangeScript
• Anular un manejador de señal existente para un objeto utilizando PropertyChanges
• Re-parentar un Item usando ParentChange
• Modificar valores de anclaje mediante AnchorChanges

El estado por defecto

Cada componente basado en Item tiene una propiedad state y un estado por defecto. El estado predeterminado es la cadena vacía ("") y contiene todos los valores de propiedad iniciales de un elemento. El estado por defecto es útil para gestionar los valores de las propiedades antes de los cambios de estado. Establecer la propiedad state a una cadena vacía cargará el estado por defecto.

La propiedad when

Para mayor comodidad, el tipo State tiene una propiedad when que puede vincularse a expresiones para cambiar el estado siempre que la expresión vinculada se evalúe como true. La propiedad when revertirá el estado al estado predeterminado cuando la expresión se evalúe como false.

Rectangle {
    id: bell
    width: 75; height: 75
    color: "yellow"

    states: State {
                name: "RINGING"
                when: (signal.state == "CRITICAL")
                PropertyChanges {speaker.play: "RING!"}
            }
}

El componente bell cambiará al estado RINGING siempre que signal.state sea CRITICAL.

Animación de cambios de estado

Los cambios de estado inducen cambios bruscos de valor. El tipo Transition permite cambios más suaves durante los cambios de estado. En las transiciones se pueden definir animaciones y comportamientos de interpolación. El artículo Animación y Transiciones tiene más información sobre la creación de animaciones de estado.

El ejemplo Animación demuestra cómo declarar un conjunto básico de estados y aplicar transiciones animadas entre ellos.

Usando Qt Quick Behaviors with States explica un problema común cuando se usan Behaviors para animar cambios de estado.

Avance rápido de estados

Para que la Transición anime correctamente los cambios de estado, a veces es necesario que el motor adelante y rebobine un estado (es decir, que establezca y desestablezca internamente el estado) antes de que se aplique finalmente. El proceso es el siguiente:

1. El estado se avanza rápidamente para determinar el conjunto completo de valores finales.
2. El estado se rebobina.
3. El estado se aplica completamente, con transiciones.

En algunos casos, esto puede provocar un comportamiento no deseado. Por ejemplo, un estado que cambia el modelo de una vista o el sourceComponent de un cargador establecerá estas propiedades varias veces (para aplicar, rebobinar y volver a aplicar), lo que puede ser relativamente costoso.

El avance rápido de estados debe considerarse un detalle de implementación, y puede cambiar en versiones posteriores.