Componentes de QML Tutorial avanzado de QML

Tutorial 3 de QML - Estados y transiciones

En este capítulo, haremos este ejemplo un poco más dinámico introduciendo estados y transiciones.

Queremos que nuestro texto se mueva a la parte inferior de la pantalla, rote y se vuelva rojo al hacer clic.

Aquí está el código QML:

import QtQuick

Rectangle {
    id: page
    width: 320; height: 480
    color: "lightgray"

    Text {
        id: helloText
        text: "Hello world!"
        y: 30
        anchors.horizontalCenter: page.horizontalCenter
        font.pointSize: 24; font.bold: true

        MouseArea { id: mouseArea; anchors.fill: parent }

        states: State {
            name: "down"; when: mouseArea.pressed == true
            PropertyChanges {
                helloText {
                    y: 160
                    rotation: 180
                    color: "red"
                }
            }
        }

        transitions: Transition {
            from: ""; to: "down"; reversible: true
            ParallelAnimation {
                NumberAnimation { properties: "y,rotation"; duration: 500; easing.type: Easing.InOutQuad }
                ColorAnimation { duration: 500 }
            }
        }
    }

    Grid {
        id: colorPicker
        x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4
        rows: 2; columns: 3; spacing: 3

        Cell { cellColor: "red"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "green"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "blue"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "black"; onClicked: helloText.color = cellColor }
    }
}

Recorrido

        states: State {
            name: "down"; when: mouseArea.pressed == true
            PropertyChanges {
                helloText {
                    y: 160
                    rotation: 180
                    color: "red"
                }
            }
        }

En primer lugar, creamos un nuevo estado hacia abajo para nuestro tipo de texto. Este estado se activará cuando se pulse MouseArea y se desactivará cuando se suelte.

El estado de inactividad incluye un conjunto de cambios en las propiedades de nuestro estado implícito por defecto (los elementos tal y como se definieron inicialmente en el QML). En concreto, establecemos la propiedad y del texto a 160, la rotación a 180 y la color a rojo.

        transitions: Transition {
            from: ""; to: "down"; reversible: true
            ParallelAnimation {
                NumberAnimation { properties: "y,rotation"; duration: 500; easing.type: Easing.InOutQuad }
                ColorAnimation { duration: 500 }
            }
        }

Como no queremos que el texto aparezca en la parte inferior de forma instantánea, sino que se mueva suavemente, añadimos una transición entre nuestros dos estados.

from y to definen los estados entre los que se ejecutará la transición. En este caso, queremos una transición desde el estado por defecto a nuestro estado abajo.

Como queremos que la misma transición se ejecute a la inversa cuando volvamos del estado de inactividad al estado por defecto, definimos reversible como true. Esto equivale a escribir las dos transiciones por separado.

El tipo ParallelAnimation asegura que los dos tipos de animaciones (número y color) comiencen al mismo tiempo. También podríamos ejecutarlas una tras otra utilizando SequentialAnimation en su lugar.

Para más detalles sobre estados y transiciones, consulta Qt Quick States y el ejemplo de estados y transiciones.

Componentes QML Tutorial avanzado de QML

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.