Grid QML Type

Posiciona sus hijos en formación de rejilla. Más...

• Lista de todos los miembros, incluidos los heredados

Propiedades

• add : Transition
• bottomPadding : real
• columnSpacing : real
• columns : int
• effectiveHorizontalItemAlignment : enumeration
• effectiveLayoutDirection : enumeration
• flow : enumeration
• horizontalItemAlignment : enumeration
• layoutDirection : enumeration
• leftPadding : real
• move : Transition
• padding : real
• populate : Transition
• rightPadding : real
• rowSpacing : real
• rows : int
• spacing : real
• topPadding : real
• verticalItemAlignment : enumeration

Señales

• positioningComplete()

Métodos

• void forceLayout()

Descripción detallada

Grid es un tipo que posiciona sus elementos hijos en forma de cuadrícula.

Una rejilla crea una cuadrícula de celdas lo suficientemente grande como para contener todos sus elementos hijos, y coloca estos elementos en las celdas de izquierda a derecha y de arriba a abajo. Cada elemento se sitúa en la esquina superior izquierda de su celda con la posición (0, 0).

Una cuadrícula tiene por defecto cuatro columnas y crea tantas filas como sean necesarias para que quepan todos sus elementos secundarios. El número de filas y columnas puede limitarse configurando las propiedades rows y columns.

Por ejemplo, a continuación se muestra una cuadrícula que contiene cinco rectángulos de varios tamaños:

import QtQuick

Grid {
    columns: 3
    spacing: 2
    Rectangle { color: "red"; width: 50; height: 50 }
    Rectangle { color: "green"; width: 20; height: 50 }
    Rectangle { color: "blue"; width: 50; height: 20 }
    Rectangle { color: "cyan"; width: 50; height: 50 }
    Rectangle { color: "magenta"; width: 10; height: 10 }
}

La rejilla posiciona automáticamente los elementos hijos en una formación de rejilla:

Si un elemento dentro de una cuadrícula no es visible, o si tiene una anchura o altura de 0, el elemento no se colocará y no será visible dentro de la columna. Además, dado que una cuadrícula posiciona automáticamente a sus elementos secundarios, un elemento secundario dentro de una cuadrícula no debe establecer sus posiciones x o y ni anclarse con ninguna de las propiedades anchor.

Para obtener más información sobre el uso de la cuadrícula y otros tipos de posicionadores relacionados, consulte Posicionadores de elementos.

Véase también Flow, Row, Column, Positioner, GridLayout, y Qt Quick Ejemplos - Posicionadores.

Documentación de propiedades

add : Transition

Esta propiedad contiene la transición que se ejecutará para los elementos que se añadan a este posicionador. Para un posicionador, esto se aplica a:

• Elementos que son creados o reparentados como hijos del posicionador después de que el posicionador haya sido creado.
• Elementos hijos que cambian su propiedad Item::visible de false a true, y por tanto ahora son visibles.

La transición puede utilizar la propiedad ViewTransition para acceder a más detalles sobre el elemento que se está añadiendo. Consulte la documentación de ViewTransition para obtener más detalles y ejemplos sobre el uso de estas transiciones.

Véase también populate, ViewTransition, y Qt Quick Ejemplos - Posicionadores.

Estas propiedades contienen el relleno alrededor del contenido.

columnSpacing : real

Esta propiedad contiene el espaciado en píxeles entre columnas.

Si no se establece esta propiedad, se utilizará el espaciado para el espaciado entre columnas.

Por defecto, esta propiedad no está definida.

Véase también rowSpacing.

columns : int

Esta propiedad contiene el número de columnas de la rejilla. El número de columnas por defecto es 4.

Si la rejilla no tiene suficientes elementos para llenar el número de columnas especificado, algunas columnas tendrán anchura cero.

Establece la alineación horizontal y vertical de los elementos de la cuadrícula. Por defecto, los elementos se alinean verticalmente en la parte superior. La alineación horizontal sigue el layoutDirection de la Rejilla, por ejemplo cuando se tiene un layoutDirection de LeftToRight, los elementos se alinearán a la izquierda.

Los valores válidos para horizontalItemAlignment son, Grid.AlignLeft, Grid.AlignRight y Grid.AlignHCenter.

Los valores válidos para verticalItemAlignment son Grid.AlignTop, Grid.AlignBottom y Grid.AlignVCenter.

Las siguientes imágenes muestran tres ejemplos de cómo alinear elementos.

Alineación horizontal	AlinearIzquierda	AlignHCenter	AlignHCenter
Alineación vertical	AlignTop	AlignTop	AlignVCenter

Al reflejar el diseño utilizando la propiedad adjunta LayoutMirroring::enabled o configurando layoutDirection, la alineación horizontal de los elementos también se reflejará. Sin embargo, la propiedad horizontalItemAlignment permanecerá inalterada. Para consultar la alineación horizontal efectiva de los elementos, utilice la propiedad de sólo lectura effectiveHorizontalItemAlignment.

Véase también Grid::layoutDirection y LayoutMirroring.

effectiveLayoutDirection : enumeration [read-only]

Esta propiedad contiene la dirección efectiva de la rejilla.

Cuando se utiliza la propiedad adjunta LayoutMirroring::enabled para disposiciones locales, la dirección de la disposición visual del posicionador de la rejilla se reflejará. Sin embargo, la propiedad layoutDirection permanecerá inalterada.

Véase también Grid::layoutDirection y LayoutMirroring.

flow : enumeration

Esta propiedad contiene el flujo del diseño.

Los valores posibles son:

• Grid.LeftToRight (por defecto) - Los ítems se posicionan uno al lado del otro en layoutDirection, luego se envuelven a la siguiente línea.
• Grid.TopToBottom - Los ítems se posicionan uno al lado del otro de arriba a abajo, luego se envuelven a la siguiente columna.

layoutDirection : enumeration

Esta propiedad contiene la dirección del diseño.

Los valores posibles son:

• Qt.LeftToRight (por defecto) - Los elementos se posicionan de arriba a abajo, y de izquierda a derecha. La dirección de flujo depende de la propiedad Grid::flow.
• Qt.RightToLeft - Los elementos se posicionan de arriba a abajo, y de derecha a izquierda. La dirección del flujo depende de la propiedad Grid::flow.

Véase también Flow::layoutDirection y Row::layoutDirection.

move : Transition

Esta propiedad contiene la transición a ejecutar para los elementos que se han movido dentro del posicionador. Para un posicionador, esto se aplica a:

• Elementos hijos que se mueven al ser desplazados debido a la adición, eliminación o reordenación de otros elementos en el posicionador.
• Elementos secundarios que se reposicionan debido al cambio de tamaño de otros elementos del posicionador.

La transición puede utilizar la propiedad ViewTransition para acceder a más detalles sobre el elemento que se está moviendo. Tenga en cuenta, sin embargo, que para esta transición de movimiento, las listas ViewTransition.targetIndexes y ViewTransition.targetItems sólo se establecen cuando esta transición se desencadena por la adición de otros elementos en el posicionador; en otros casos, estas listas estarán vacías. Consulte la documentación de ViewTransition para obtener más detalles y ejemplos sobre el uso de estas transiciones.

Véase también add, populate, ViewTransition, y Qt Quick Ejemplos - Posicionadores.

populate : Transition

Esta propiedad contiene la transición que se ejecutará para los elementos que forman parte de este posicionador en el momento de su creación. La transición se ejecuta cuando el posicionador se crea por primera vez.

La transición puede utilizar la propiedad ViewTransition para acceder a más detalles sobre el elemento que se está añadiendo. Consulte la documentación de ViewTransition para obtener más detalles y ejemplos sobre el uso de estas transiciones.

Véase también add, ViewTransition, y Qt Quick Ejemplos - Posicionadores.

rowSpacing : real

Esta propiedad contiene el espaciado en píxeles entre filas.

Si no se establece esta propiedad, se utilizará el espaciado para el espaciado entre filas.

Por defecto, esta propiedad no está definida.

Véase también columnSpacing.

rows : int

Esta propiedad contiene el número de filas de la rejilla.

Si la cuadrícula no tiene suficientes elementos para llenar el número especificado de filas, algunas filas tendrán un ancho cero.

spacing : real

El espaciado es la cantidad en píxeles que se deja vacía entre elementos adyacentes. La cantidad de espaciado aplicada será la misma en las direcciones horizontal y vertical. El espaciado por defecto es 0.

El siguiente ejemplo coloca una cuadrícula que contiene un rectángulo rojo, uno azul y uno verde sobre un fondo gris. El área que ocupa el posicionador de la rejilla está coloreada en blanco. El posicionador de la izquierda no tiene espaciado (por defecto), y el posicionador de la derecha tiene un espaciado de 6.

Véase también rows y columns.

Documentación de señales

positioningComplete()

Esta señal se emite cuando se ha completado el posicionamiento.

Documentación del método

void forceLayout()

Grid suele posicionar a sus hijos una vez por fotograma. Esto significa que dentro de los bloques de script es posible que los hijos subyacentes hayan cambiado, pero que la cuadrícula aún no se haya actualizado en consecuencia.

Este método fuerza al Grid a responder inmediatamente a cualquier cambio pendiente en sus hijos.

Nota: los métodos en general sólo deben ser llamados después de que el Componente haya finalizado.