Grid QML Type

Positionne ses enfants dans la formation de la grille. Plus d'informations...

• 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 sous forme de grille.

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

Par défaut, une grille comporte quatre colonnes et crée autant de lignes qu'il est nécessaire pour placer 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 une grille contenant cinq rectangles de différentes tailles :

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 dans une formation en grille :

Si un élément d'une grille n'est pas visible, ou si sa largeur ou sa hauteur est égale à 0, l'élément ne sera pas disposé et ne sera pas visible dans la colonne. De même, étant donné qu'une grille positionne automatiquement ses enfants, un élément enfant à l'intérieur d'une grille ne doit pas définir ses positions x ou y ni s'ancrer à l'aide de l'une des propriétés anchor.

Pour plus d'informations sur l'utilisation des grilles et d'autres types de positionneurs, voir Positionneurs d'éléments.

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

Documentation sur les propriétés

add : Transition

Cette propriété contient la transition à exécuter pour les éléments qui sont ajoutés à ce positionneur. Pour un positionneur, cela s'applique aux éléments suivants

• aux éléments qui sont créés ou reparentés en tant qu'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 qui est ajouté. Voir la documentation de ViewTransition pour plus de détails et d'exemples sur l'utilisation de ces transitions.

Voir aussi populate, ViewTransition, et Qt Quick Exemples - Positionneurs.

Ces propriétés définissent le remplissage autour du contenu.

columnSpacing : real

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

Si cette propriété n'est pas définie, l'espacement est utilisé pour l'espacement des colonnes.

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

Voir aussi rowSpacing.

columns : int

Cette propriété indique le nombre de colonnes de la grille. Le nombre de colonnes par défaut est de 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 de la grille. Par défaut, les éléments sont alignés verticalement en haut. L'alignement horizontal suit l'adresse layoutDirection de la grille. Par exemple, si l'adresse layoutDirection va de gauche à droite, les éléments seront alignés à gauche.

Les valeurs valables pour horizontalItemAlignment sont Grid.AlignLeft, Grid.AlignRight et Grid.AlignHCenter.

Les valeurs valables pour verticalItemAlignment sont Grid.AlignTop, Grid.AlignBottom et Grid.AlignVCenter.

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

Alignement horizontal	Aligner à gauche	AlignHCenter	AlignHCenter
Alignement vertical	AlignTop	AlignTop	AlignVCenter

Lors de la mise en miroir de la disposition à l'aide de la propriété jointe LayoutMirroring::enabled ou en définissant la propriété layoutDirection, l'alignement horizontal des éléments sera également mis en miroir. Cependant, la propriété horizontalItemAlignment restera inchangée. Pour connaître 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é indique la direction effective de la grille.

Lors de l'utilisation de la propriété jointe LayoutMirroring::enabled pour les mises en page locales, la direction de la mise en page visuelle du positionneur de grille sera reflétée. Cependant, la propriété layoutDirection restera inchangée.

Voir également Grid::layoutDirection et LayoutMirroring.

flow : enumeration

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

Les valeurs possibles sont les suivantes :

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

layoutDirection : enumeration

Cette propriété indique la direction de la mise en page.

Les valeurs possibles sont les suivantes :

• Qt.LeftToRight (par défaut) - Les éléments sont positionnés de haut en bas et de gauche à droite. La direction du flux dépend de la propriété Grid::flow.
• Qt.RightToLeft - Les éléments sont positionnés de haut en bas et de droite à gauche. La direction du flux dépend de la propriété Grid::flow.

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

move : Transition

Cette propriété définit la transition à exécuter pour les éléments qui se sont déplacés dans le positionneur. Pour un positionneur, cela s'applique aux éléments suivants

• aux éléments enfants qui se déplacent suite à l'ajout, à la suppression ou à la réorganisation 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 qui est déplacé. 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. Voir la documentation de ViewTransition pour plus de détails et d'exemples sur l'utilisation de ces transitions.

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

populate : Transition

Cette propriété définit la transition à exécuter pour les éléments qui font partie de ce positionneur au moment de sa création. La transition est exécutée lors de la première création du positionneur.

La transition peut utiliser la propriété ViewTransition pour accéder à plus de détails sur l'élément qui est ajouté. Voir la documentation ViewTransition pour plus de détails et d'exemples sur l'utilisation de ces transitions.

Voir aussi add, ViewTransition, et Qt Quick Exemples - Positionneurs.

rowSpacing : real

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

Si cette propriété n'est pas définie, l'espacement est utilisé pour l'espacement des lignes.

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

Voir aussi columnSpacing.

rows : int

Cette propriété indique 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 est la quantité de pixels laissés vides entre les éléments adjacents. L'espacement appliqué sera le même dans les directions horizontale et verticale. L'espacement par défaut est de 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 la grille est colorée en blanc. Le positionneur de gauche n'a pas d'espacement (par défaut), et le positionneur de droite a un espacement de 6.

Voir également rows et columns.

Documentation sur les signaux

positioningComplete()

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

Documentation de la méthode

void forceLayout()

La grille positionne généralement ses enfants une fois par image. Cela signifie qu'à l'intérieur des blocs de script, il est possible que les enfants sous-jacents aient changé, mais que la grille n'ait pas encore été mise à jour en conséquence.

Cette méthode oblige la grille à réagir immédiatement à toute modification en cours de ses enfants.

Remarque: en général, les méthodes ne doivent être appelées qu'une fois le composant terminé.