Para quienes hayan o estén trabajado con Flash, Flex, WPF o Silverlight el tema de los States es algo conocido y de uso diario, en QML un State nos permite cambiar propiedades de un elemento, disparar un script usando StateChangeScript, modificar el parent utilizando ParentChanges, cambiar la alineación usando AnchorChanges o sobrescribir un signal handler utilizando PropertyChanges, todo ello cuando ocurra un evento determinado ya sea por nosotros en código o por el usuario cuando interactúa con la aplicación.

Vamos a comenzar con un ejemplo simple, la idea es crear un botón, mas que nada porque es un elemento de uso común el cual cuenta con varios estados con los que podemos jugar y porque QML no trae un elemento Button definido así que si necesitamos hacer uso de uno vamos a tener que crearlo nosotros, esto puede parecer un poco molesto, pero por suerte es un proceso fácil y cuyo código puede ser reutilizado posteriormente.

Vamos a empezar creando un proyecto con Qt Creator, luego de crearlo vamos a añadir un archivo QML llamado Button.qml, una cosa a tener en cuenta es que el nombre que usemos para el archivo sera el que usaremos para invocar el elemento que creemos con el, en este caso Button.

El próximo paso sera pegar el siguiente código en el archivo Button.qml

Button.qml

import Qt 4.7

Item {
    id: container
    signal clicked
    property string text

    Rectangle {
        id: button
        color: "#00aeef"
        border.width: 1
        radius: 4
        width: container.width
        height: container.height
    }

    MouseArea {
        id: mouseRegion
        anchors.fill: button
        onClicked: {
            container.clicked();
        }
    }

    Text {
        color: "#fff"
        anchors.centerIn: button
        font.pixelSize: 12
        text: container.text
    }

    states: [
        State {
            name: "Pressed"
            when: mouseRegion.pressed == true
            PropertyChanges {
                target: button
                color: "#333"
            }
        }
    ]
 }

El código comienza con el import de rigor y sigue con un Item, el cual es el mas básico de los visual items en QML, continua con el signal que no es mas que un handler usado por el MouseArea y que detecta las acciones hechas por el mouse dentro de si, y por ultimo en esta primera parte del código tenemos la declaración de la propiedad text la cual usaremos para setear el texto a mostrar por el botón.

A continuación tenemos un elemento Rectangle que sera nuestro botón en si, sigue el MouseArea que esta configurado para que ocupe toda la superficie del Rectangle y que contiene el handler onClicked el cual se dispara cuando se hace click con el botón izquierdo del mouse, por ultimo tenemos un elemento Text que hace las veces de label del botón.

Y para finalizar llegamos a la sección de states donde tenemos un State cuyo nombre es Pressed y se dispara cuando el MouseArea ha recibido un click el cual a través de la PropertyChanges que apunta al botón cambien la propiedad color del mismo.

Bien, ya tenemos nuestro botón listo, utilizarlo es tan simple como invocar un elemento Button, en el código que sigue pueden ver un ejemplo de como hacerlo.

Main.qml

import Qt 4.7

Rectangle {
    width: 200
    height: 200
    id: container
    Button {
        width: 100;
        height: 25;
        text: 'Hello World';
        anchors.horizontalCenter: container.horizontalCenter;
        anchors.verticalCenter: container.verticalCenter;
    }
}

Animación

Bien como se ve en el ejemplo anterior el uso de states es bastante simple e intuitivo, con states se pueden hacer muchas mas cosas y pueden aprender mas de ellos viendo la documentación, pero para ir cerrando este post y como adelanto de los que vienen vamos a agregarle una pequeña animación al State utilizado por nuestro botón para hacer mas suave la transición entre el estado por default y Pressed, para ello solamente hay que agregar el siguiente código luego de la sección de states.

Button.qml

transitions: [
    Transition {
        PropertyAnimation { properties: "color"; duration: 300 }
    }
]

La animación que usamos es bastante simple lo único que hacemos es crear una Transition y setear las propiedades que serán animadas por la PropertyAnimation y su duración.

El resultado de todo esto debería de verse de la siguiente manera:

Recuerden darse una vuelta por los ejemplos y por la documentación de Qt Quick, en la cual hay mas información acerca de states.