Componentes de Qt QML

Además de los componentes AppStudio QML que tiene a su disposición para diseñar la interfaz de usuario de la aplicación, también tiene acceso a todos los componentes QML de The Qt Company. En este tema se describen los componentes más útiles. Para ver una lista completa de tipos de QML de Qt, consulte la documentación de Qt.

A continuación, se muestran algunos de los tipos de QML más utilizados:

• Posicionadores
• Anclajes
• Diseños
• Repetidores
• Estados
• Conexiones

Precaución:

Se han observado diferencias en la visualización de los elementos de la interfaz de usuario (UI) en las aplicaciones AppStudio y las muestras durante la migración de Qt 5.13.1 a Qt 5.15.2. Algunas diferencias son la posición, el tamaño, el diseño, el color, el recorte, el ajuste y la fuente. Revise la visualización de todos los elementos de UI de sus aplicaciones. En algunos casos, es posible que deba cambiar la anidación de sus componentes; en otros casos, es posible que se deban definir más o menos propiedades. Dado que existe mucha flexibilidad en cuanto a cómo se definen los elementos de UI en QML, no hay reglas establecidas.

En la versión 5.15.2, los tipos de propiedades Qt como bool, string y int son estrictos y ya no admiten valores nulos ni no definidos. Si su aplicación utiliza estos tipos, debe tener en cuenta cómo admitir valores nulos o no definidos. Como alternativa, puede utilizar el tipo de propiedad var, que permite valores nulos y no definidos, pero también el resto de valores posibles.

Posicionadores

Los posicionadores son elementos de contenedor que administran las posiciones de los elementos en su interfaz de usuario. Los tipos de posicionadores incluyen fila, columna, cuadrícula y flujo. Organizar los elementos basándose en cualquiera de estos posicionadores le permite organizarlos en un diseño regular muy adecuado para las interfaces de usuario de tamaño ajustable. Por ejemplo, organice sus elementos en una cuadrícula y, cuando vea su aplicación en orientación vertical, es posible que vea una matriz de elementos de 2 x 5; pero si cambia a horizontal, se reorganiza automáticamente la cuadrícula de elementos para que se ajusten a la pantalla y se verá una matriz de elementos de 3 x 4.

Para obtener más información sobre los posicionadores, consulte la documentación de Qt.

Anclajes

Se puede considerar que cada elemento tiene siete puntos de anclaje u otros elementos se pueden posicionar con relación a estos. Estos puntos son el superior, inferior, izquierdo, derecho, centro horizontal, centro vertical y línea base (la línea en la que se coloca el texto del elemento). Esto es ideal para posicionar los elementos relacionados entre sí para crear interfaces de usuario dinámicas. Los anclajes se mantienen incluso cuando cambian las dimensiones o las ubicaciones de los elementos. También se pueden definir márgenes de anclaje, especificando cuánto espacio debe dejarse fuera del anclaje de un elemento.

Para obtener más información sobre los anclajes, consulte la documentación de Qt.

Diseños

Para usar Qt Quick Layouts, debe hacer referencia a un módulo adicional en su archivo QML, por ejemplo:

import QtQuick.Layouts 1.15

Los tres diseños son RowLayout, ColumnLayout y GridLayout. En comparación con las filas, columnas y cuadrículas, el uso de diseños permite un control más detallado sobre el posicionamiento del elemento. Esto incluye la capacidad de especificar la alineación de cada elemento en el diseño. Los GridLayouts también permiten definir el espaciado independiente de columnas y filas, espaciar los elementos por las filas y columnas y especificar una celda de cuadrícula individual para un elemento. Los diseños también se pueden utilizar para establecer las alturas y los anchos máximos y mínimos, además de ofrecer la capacidad de rellenar el ancho y la altura de cada elemento. Esto es especialmente útil cuando se diseña para pantallas dinámicas o varias pantallas. Los diseños también se pueden reflejar, cambiando un diseño de izquierda a derecha a un diseño de derecha a izquierda.

Repetidores

Un objeto repetidor crea elementos desde una plantilla para su uso con los posicionadores mediante datos de un modelo. La combinación de repetidores y posicionadores es una forma eficaz de disponer muchos elementos. Un modelo puede ser una de las opciones siguientes:

• Número que indica el número de delegados que va a crear el repetidor
• Fuente de datos de lista de formato libre: una ListModel
• Lista de cadenas de caracteres
• Lista de objetos

El delegado proporciona una plantilla que define cada elemento del que crea instancias el repetidor. Un delegado de repetidor puede acceder a su índice dentro del repetidor, así como a los datos modelo relevantes para el delegado.

Para obtener más información sobre los repetidores, consulte la documentación de Qt.

Estados

Estados se puede utilizar para mostrar una vista o pantalla diferente en una aplicación. Puede utilizarlos para mostrar u ocultar elementos en función del valor de una propiedad, para cambiar el anclaje o cambiar objetos principales. Basándose en el estado, puede iniciar, detener o hacer una pausa en animaciones o ejecutar scripts. Cada componente basado en un elemento tiene una propiedad de estado y un estado predeterminado. El estado predeterminado es la cadena de caracteres vacía (»») y contiene todos los valores de propiedad iniciales. Configurar la propiedad Estado en una cadena de caracteres vacía carga el estado predeterminado.

Para obtener más información sobre los estados, consulte la documentación de Qt.

Conexiones

En Qt 5.15, existe una nueva sintaxis para las conexiones. El método anterior de crear un controlador on<Signal> queda obsoleto y ahora se debe seguir la sintaxis de función. Lo que sigue es un mensaje de advertencia que recibirá cuando ejecute una aplicación utilizando la sintaxis de conexión anterior:

qrc:/qml/main.qml:277:5: QML Connections: Implicitly defined onFoo properties in Connections are deprecated. Use this syntax instead: function onFoo (<arguments>) { ... }

El siguiente ejemplo muestra cómo se definía normalmente una conexión en Qt 5.13 y versiones anteriores:

Connections { 
     target: mouseArea 
     onPositionChanged: { 
         console.log( "onPositionChanged: ", mouse.x, mouse.y ); 
     } 
     onPressedChanged: { 
         console.log( "onPressedChanged: ", mouseArea.pressed ); 
     } 
}

El siguiente ejemplo muestra cómo se debe definir una conexión en Qt 5.15 y posteriores:

Connections { 
     target: mouseArea 
     function onPositionChanged(mouse) { 
         console.log( "onPositionChanged: ", mouse.x, mouse.y ); 
     } 
     function onPressedChanged() { 
         console.log( "onPressedChanged: ", mouseArea.pressed ); 
     } 
}

Ahora que se utiliza la sintaxis de función, debe asegurarse de que todos los parámetros de señal estén enumerados explícitamente. Si omite cualquiera, los parámetros de señal no estarán disponibles por su nombre, y esto puede llevar a referencias indefinidas en su código. Por ejemplo, debe utilizar function onPositionChanged(mouse) en lugar de onPositionChanged.

Al enumerar los parámetros de señal, se recomienda que enumere todos los parámetros en el orden correcto utilizando nombres de parámetros de señal formales como nombres de parámetros de función. Por ejemplo, utilice function onPositionChanged(mouse) y no function onPositionChanged(m).

Si la señal es para un cambio de propiedad, debe asignar explícitamente al objeto el nombre para acceder a la propiedad. Por ejemplo, debe utilizar mouseArea.pressed y no pressed.

Para obtener más información sobre las conexiones, consulte la documentación de Qt.