QML

importar QtQuickRectángulo { id: canvas ancho: 250 alto: 200 color: "azul"Imagen { id: logo source: "pics/logo.png" anchors.centerIn: parent x: canvas . height / 5 } }

Los objetos se especifican por su tipo, seguido de un par de llaves. Los tipos de objetos siempre comienzan con mayúscula. En el ejemplo anterior, hay dos objetos: un Rectángulo y su hijo, una Imagen. Entre las llaves, se puede especificar información sobre el objeto, como sus propiedades. Las propiedades se especifican como propiedad: valor. En el ejemplo anterior, la Imagen tiene una propiedad llamada source, a la que se le ha asignado el valor pics/logo.png. La propiedad y su valor están separados por dos puntos.

La propiedad id

A cada objeto se le puede asignar una propiedad única especial llamada ID. Asignar un ID permite que otros objetos y scripts hagan referencia al objeto. El primer elemento Rectángulo que se muestra a continuación tiene un ID, myRect. El segundo elemento Rectángulo define su propio ancho haciendo referencia a myRect.width, lo que significa que tendrá el mismo valor de ancho que el primer elemento Rectángulo.

Elemento { Rectángulo { id: myRect ancho: 120 alto: 100 } Rectángulo { ancho: myRect . ancho alto : 200 } }

Un identificador debe comenzar con una letra minúscula o un guion bajo, y no puede contener otros caracteres que no sean letras, dígitos y guiones bajos.

La vinculación de propiedades especifica el valor de una propiedad de forma declarativa. El valor de la propiedad se actualiza automáticamente si cambian las demás propiedades o los valores de los datos, siguiendo el paradigma de programación reactiva .

En QML, las vinculaciones de propiedades se crean implícitamente siempre que se asigna una expresión JavaScript a una propiedad. El siguiente código QML utiliza dos vinculaciones de propiedades para relacionar el tamaño del rectángulo con el de otro elemento.

Rectángulo { ancho: otherItem . ancho alto: otherItem . alto }

QML extiende un motor JavaScript que cumple con los estándares, por lo que cualquier expresión JavaScript válida puede usarse como enlace de propiedades. Los enlaces pueden acceder a las propiedades de los objetos, realizar llamadas a funciones e incluso usar objetos JavaScript integrados como Date y Math.

Rectángulo { función calcularMiAltura () { return Math . max ( otherItem . height , thirdItem . height ); } anchors.centerIn: parent width: Math . min ( otherItem . width , 10 ) height: calcularMiAltura () color: width > 10 ? "azul" : "rojo" }

Los estados son un mecanismo para combinar cambios en las propiedades de una unidad semántica. Un botón, por ejemplo, tiene un estado pulsado y otro no pulsado; una aplicación de agenda podría tener un estado de solo lectura y otro de edición para los contactos. Cada elemento tiene un estado base implícito. Los demás estados se describen enumerando las propiedades y los valores de aquellos elementos que difieren del estado base.

Ejemplo: En su estado predeterminado, myRect se encuentra en la posición 0,0. En el estado "movido", se encuentra en la posición 50,50. Al hacer clic dentro del área del ratón, el estado cambia del estado predeterminado al estado "movido", desplazando así el rectángulo.

importar QtQuickElemento { id: myItem ancho: 200 ; alto: 200Rectángulo { id: myRect ancho: 100 ; alto: 100 color: "rojo" } estados: [ Estado { nombre: "movido" CambiosDePropiedad { objetivo: myRect x: 50 y: 50 } } ] ÁreaDeRatón { anclajes.rellenar: padre alHacerClic: myItem . estado = 'movido' } }

Los cambios de estado se pueden animar mediante transiciones.

Por ejemplo, al agregar este código al elemento Item anterior, se anima la transición al estado "movido":

transiciones: [ Transición { de: "*" a: "movido" AnimaciónNúmero { propiedades: "x,y" ; duración: 500 } } ]

En QML, las animaciones se realizan animando las propiedades de los objetos. Se pueden animar propiedades de tipo real, int, color, rect, point, size y vector3d.

QML admite tres formas principales de animación: animación básica de propiedades, transiciones y comportamientos de propiedades.

La forma más sencilla de animación es PropertyAnimation, que puede animar todos los tipos de propiedades mencionados anteriormente. Una animación de propiedad se puede especificar como origen de valor mediante la sintaxis Animation on property. Esto resulta especialmente útil para animaciones repetitivas.

El siguiente ejemplo crea un efecto de rebote:

Rectángulo { id: rect ancho: 120 ; alto: 200Imagen { id: img source: "pics/qt.png" x: 60 - img . width / 2 y: 0Animación secuencial en y { bucles: Animación.Infinito AnimaciónNúmero { a : 200 - img.altura ; tipo de suavizado : suavizado.OutBounce ; duración: 2000 } AnimaciónPausa { duración: 1000 } AnimaciónNúmero { a: 0 ; tipo de suavizado : suavizado.OutQuad ; duración: 1000 } } } }

QML proporciona acceso directo a los siguientes conceptos de Qt:

• Señales de QObject: pueden activar devoluciones de llamada en JavaScript.
• Ranuras de QObject: disponibles como funciones para llamar en JavaScript.
• Propiedades de QObject: disponibles como variables en JavaScript y para enlaces.
• QWindow – Window crea una escena QML en una ventana.
• Q*Model – utilizado directamente en el enlace de datos (por ejemplo, QAbstractItemModel) ^{[ 29 ] [ 30 ] [ 31 ]}

Los manejadores de señales son funciones de devolución de llamada de JavaScript que permiten realizar acciones imperativas en respuesta a un evento. Por ejemplo, el elemento MouseArea tiene manejadores de señales para gestionar la pulsación, la liberación y el clic del ratón:

MouseArea { onPressed : console.log ( "botón del ratón pulsado " ) }

Todos los nombres de los manejadores de señales comienzan con "on".

• Integración de QML y C++
• Clases importantes de C++ proporcionadas por el módulo Qt QML.