Grid QML Type

Dispose ses éléments enfants selon une grille. En savoir plus...

• Liste de tous les membres, y compris les membres hérités

Propriétés

• 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

Signaux

• positioningComplete()

Méthodes

• void forceLayout()

Description détaillée

Grid est un type qui positionne ses éléments enfants selon une disposition en grille.

Une grille crée un réseau de cellules suffisamment grand pour contenir tous ses éléments enfants, puis place ces éléments dans les cellules de gauche à droite et de haut en bas. Chaque élément est positionné dans le coin supérieur gauche de sa cellule, à la position (0, 0).

Par défaut, une grille comporte quatre colonnes et crée autant de lignes que nécessaire pour accueillir tous ses éléments enfants. Le nombre de lignes et de colonnes peut être limité en définissant les propriétés « rows » et « columns ».

Par exemple, voici ci-dessous une grille contenant cinq rectangles de tailles diverses :

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 grille positionne automatiquement les éléments enfants selon une disposition en grille :

Si un élément d’une grille n’est pas défini comme « visible » (positionné), ou s’il a une largeur ou une hauteur égale à 0, il ne sera pas positionné et ne sera pas visible dans la colonne. De plus, comme une grille positionne automatiquement ses éléments enfants, un élément enfant d’une grille ne doit pas définir ses positions « x » ou « y », ni s’ancrer à l’aide des propriétés « anchor ».

Pour plus d’informations sur l’utilisation de la grille et d’autres types de positionneurs associés, consultez la section « Positionneurs d’éléments ».

Voir également Flow, Row, Column, Positioner, GridLayout et Qt Quick Exemples - Positionneurs.

Documentation sur les propriétés

add : Transition

Cette propriété définit la transition à appliquer aux éléments ajoutés à ce positionneur. Pour un positionneur, cela s’applique aux :

• Les éléments créés ou dont le parent a été modifié pour devenir un enfant du positionneur après la création de ce dernier
• Les éléments enfants dont la propriété « Item::visible » passe de « false » à « true », et qui sont donc désormais visibles

La transition peut utiliser la propriété ` ViewTransition ` pour accéder à plus de détails sur l’élément en cours d’ajout. Consultez la documentation « ViewTransition » pour plus de détails et d’exemples sur l’utilisation de ces transitions.

Voir également populate, ViewTransition et Qt Quick Exemples - Positionneurs.

Ces propriétés définissent la marge autour du contenu.

columnSpacing : real

Cette propriété définit l'espacement en pixels entre les colonnes.

Si cette propriété n'est pas définie, c'est la valeur « spacing » qui est utilisée pour l'espacement des colonnes.

Par défaut, cette propriété n'est pas définie.

Voir également rowSpacing.

columns : int

Cette propriété indique le nombre de colonnes de la grille. Le nombre de colonnes par défaut est 4.

Si la grille ne contient pas suffisamment d'éléments pour remplir le nombre de colonnes spécifié, certaines colonnes auront une largeur nulle.

Définit l'alignement horizontal et vertical des éléments dans la grille. Par défaut, les éléments sont alignés verticalement en haut. L'alignement horizontal suit l'layoutDirection de la grille ; par exemple, lorsque l' est définie sur « LeftToRight » ( layoutDirection ), les éléments seront alignés à gauche.

Les valeurs valides pour « horizontalItemAlignment » sont : « Grid.AlignLeft », « Grid.AlignRight » et « Grid.AlignHCenter ».

Les valeurs valides pour « verticalItemAlignment » sont : « Grid.AlignTop », « Grid.AlignBottom » et « Grid.AlignVCenter ».

Les images ci-dessous montrent trois exemples d’alignement des éléments.

Alignement horizontal	AlignLeft	AlignHCenter	AlignHCenter
Alignement vertical	AlignTop	Aligner en haut	AlignVCenter

Lorsque vous inversez la disposition à l’aide de la propriété associée LayoutMirroring::enabled ou en définissant la valeur layoutDirection, l’alignement horizontal des éléments est également inversé. Cependant, la propriété horizontalItemAlignment reste inchangée. Pour interroger l’alignement horizontal effectif des éléments, utilisez la propriété en lecture seule effectiveHorizontalItemAlignment.

Voir également Grid::layoutDirection et LayoutMirroring.

effectiveLayoutDirection : enumeration [read-only]

Cette propriété définit le sens de mise en page effectif de la grille.

Lorsque vous utilisez la propriété associée LayoutMirroring::enabled pour les mises en page locales, la direction visuelle de la mise en page du positionneur de grille sera inversée. Cependant, la propriété layoutDirection restera inchangée.

Voir également Grid::layoutDirection et LayoutMirroring.

flow : enumeration

Cette propriété détermine le flux de la mise en page.

Les valeurs possibles sont :

• Grid.LeftToRight (par défaut) : les éléments sont positionnés les uns à côté des autres dans la layoutDirection, puis repassent à la ligne suivante.
• Grid.TopToBottom : les éléments sont positionnés les uns à côté des autres de haut en bas, puis repassent sur la colonne suivante.

layoutDirection : enumeration

Cette propriété définit le sens de mise en page.

Les valeurs possibles sont :

• Qt.LeftToRight (par défaut) : les éléments sont positionnés de haut en bas et de gauche à droite. Le sens de défilement dépend de la propriété Grid::flow.
• Qt.RightToLeft : les éléments sont positionnés de haut en bas et de droite à gauche. Le sens de défilement dépend de la propriété ` Grid::flow `.

Voir également Flow::layoutDirection et Row::layoutDirection.

move : Transition

Cette propriété définit la durée de la transition pour les éléments qui se sont déplacés au sein du positionneur. Pour un positionneur, cela s'applique aux :

• les éléments enfants qui se déplacent lorsqu’ils sont déplacés en raison de l’ajout, de la suppression ou du réagencement d’autres éléments dans le positionneur
• Les éléments enfants qui sont repositionnés en raison du redimensionnement d'autres éléments dans le positionneur

La transition peut utiliser la propriété « ViewTransition » pour accéder à plus de détails sur l’élément en cours de déplacement. Notez toutefois que pour cette transition de déplacement, les listes « ViewTransition.targetIndexes » et « ViewTransition.targetItems » ne sont définies que lorsque cette transition est déclenchée par l’ajout d’autres éléments dans le positionneur ; dans les autres cas, ces listes seront vides. Consultez la documentation « ViewTransition » pour plus de détails et d’exemples sur l’utilisation de ces transitions.

Voir également add, populate, ViewTransition et Qt Quick Exemples - Positionneurs.

populate : Transition

Cette propriété contient la transition à exécuter pour les éléments faisant partie de ce positionneur au moment de sa création. La transition est exécutée lors de la création initiale du positionneur.

La transition peut utiliser la propriété ` ViewTransition ` pour accéder à davantage de détails sur l’élément en cours d’ajout. Consultez la documentation « ViewTransition » pour plus de détails et d’exemples sur l’utilisation de ces transitions.

Voir également add, ViewTransition et Qt Quick Exemples - Positionneurs.

rowSpacing : real

Cette propriété définit l'espacement en pixels entre les lignes.

Si cette propriété n'est pas définie, c'est la valeur « spacing » qui est utilisée pour l'espacement entre les lignes.

Par défaut, cette propriété n'est pas définie.

Voir également columnSpacing.

rows : int

Cette propriété contient le nombre de lignes de la grille.

Si la grille ne contient pas suffisamment d'éléments pour remplir le nombre de lignes spécifié, certaines lignes auront une largeur nulle.

spacing : real

L'espacement correspond à la distance en pixels laissée libre entre des éléments adjacents. La valeur de l'espacement appliquée sera la même dans les directions horizontale et verticale. L'espacement par défaut est 0.

L'exemple ci-dessous place une grille contenant un rectangle rouge, un rectangle bleu et un rectangle vert sur un fond gris. La zone occupée par le positionneur de grille est colorée en blanc. Le positionneur de gauche n'a pas d'espacement (valeur par défaut), tandis que celui de droite a un espacement de 6.

Voir également rows et columns.

Documentation Signal

positioningComplete()

Ce signal est émis lorsque le positionnement est terminé.

Documentation de la méthode

void forceLayout()

En règle générale, le Grid positionne ses éléments enfants une fois par image. Cela signifie qu'au sein des blocs de script, il est possible que les éléments enfants sous-jacents aient changé, mais que le Grid n'ait pas encore été mis à jour en conséquence.

Cette méthode force la grille à réagir immédiatement à toute modification en attente au niveau de ses éléments enfants.

Remarque: en règle générale, les méthodes ne doivent être appelées qu'une fois que le composant a terminé son exécution.