Conceptos importantes en Qt Quick - Posicionamiento

Los elementos visuales en QML pueden posicionarse de varias maneras. El concepto más importante relacionado con el posicionamiento es el de anclaje, una forma de posicionamiento relativo en la que los elementos pueden anclarse (o unirse) entre sí en determinados límites. Otros conceptos de posicionamiento son el posicionamiento absoluto, el posicionamiento con coordenadas, los posicionadores y los diseños.

Posicionamiento manual

Los elementos pueden posicionarse manualmente. Si la interfaz de usuario va a ser estática, el posicionamiento manual es la forma de posicionamiento más eficaz.

En cualquier interfaz de usuario, los tipos visuales existen en una ubicación concreta en las coordenadas de la pantalla en cualquier instante de tiempo. Aunque las interfaces de usuario dinámicas y con animación fluida son uno de los principales objetivos de Qt Quick, las interfaces de usuario con posicionamiento estático siguen siendo una opción viable. Es más, si la posición de esos tipos no cambia, a menudo puede ser más eficaz especificar la posición manualmente que utilizar los métodos de posicionamiento más dinámicos documentados en secciones posteriores.

En Qt Quick, cada objeto visual se posiciona dentro del sistema de coordenadas proporcionado por el lienzo visual Qt Quick. Como se describe en ese documento, las coordenadas x e y de un objeto visual son relativas a las de su padre visual, teniendo la esquina superior izquierda la coordenada (0, 0).

Así, el siguiente ejemplo mostrará dos rectángulos posicionados manualmente:

import QtQuick 2.0

Item {
    width: 200
    height: 200

    Rectangle {
        x: 50
        y: 50
        width: 100
        height: 100
        color: "green"
     }

     Rectangle {
        x: 100
        y: 100
        width: 50
        height: 50
        color: "yellow"
     }
}

Posicionamiento con enlaces

Los elementos también pueden posicionarse asignando expresiones de vinculación a las propiedades asociadas con su ubicación en el lienzo visual. Este tipo de posicionamiento es el más dinámico; sin embargo, el posicionamiento de elementos de esta forma conlleva un coste de rendimiento.

La posición y las dimensiones de un objeto visual también pueden establecerse mediante vínculos de propiedades. Esto tiene la ventaja de que los valores se actualizarán automáticamente a medida que cambien las dependencias de los enlaces. Por ejemplo, la anchura de un rectángulo puede depender de la anchura del rectángulo contiguo.

Aunque los enlaces proporcionan una forma muy flexible e intuitiva de crear diseños dinámicos, hay que tener en cuenta que tienen un coste de rendimiento asociado y que, en la medida de lo posible, es preferible utilizar diseños de anclaje prístinos.

Anclajes

Los anclajes permiten colocar un elemento adyacente o dentro de otro, uniendo uno o más puntos de anclaje (límites) del elemento a un punto de anclaje del otro. Estos anclajes se mantienen aunque cambien las dimensiones o la ubicación de uno de los elementos, lo que permite crear interfaces de usuario muy dinámicas.

Un objeto visual tiene varios puntos de anclaje (o, más correctamente, líneas de anclaje). Otros elementos pueden anclarse a esos puntos, lo que significa que cuando un objeto cambia, los demás objetos anclados a él se ajustan automáticamente para mantener el anclaje.

Qt Quick proporciona anclas como concepto de nivel superior. Consulte la documentación sobre posicionamiento con anclas para obtener información detallada sobre el tema.

Es importante tener en cuenta que los diseños basados en anclas son, por lo general, mucho más eficaces que los basados en vinculaciones, si están en perfecto estado. Una maquetación con anclas "prístina" es aquella que sólo utiliza anclas (con anidamiento de objetos) para determinar el posicionamiento, mientras que una maquetación con anclas "contaminada" es aquella que utiliza tanto anclas como enlaces (ya sea en propiedades [x,y] relacionadas con la posición o en propiedades [anchura,altura] relacionadas con las dimensiones) para determinar la posición.

Posicionadores

Qt Quick también proporciona algunos elementos posicionadores integrados. Para muchos casos de uso, el mejor posicionador a utilizar es una simple cuadrícula, fila o columna, y Qt Quick proporciona elementos que posicionarán a los niños en estas formaciones de la manera más eficiente posible. Consulte la documentación sobre los tipos de posicionadores de elementos para obtener más información sobre la utilización de posicionadores predefinidos.

Diseños

A partir de Qt 5.1, el módulo Qt Quick Layouts también puede utilizarse para organizar elementos Qt Quick en una interfaz de usuario. A diferencia de los posicionadores, los tipos de Qt Quick Layouts gestionan tanto las posiciones como los tamaños de los elementos en una interfaz declarativa. Son muy adecuados para interfaces de usuario redimensionables.

Soporte de derecha a izquierda

La direccionalidad de la forma escrita de un lenguaje a menudo tiene un gran impacto en cómo deben posicionarse los tipos visuales de una interfaz de usuario. Qt Quick admite el posicionamiento de derecha a izquierda de los tipos a través de los diseños predefinidos, así como los diseños de texto de derecha a izquierda.

Por favor, consulte la documentación sobre el soporte de derecha a izquierda en Qt Quick para obtener información detallada sobre el tema.