Column QML Type

Aligne ses éléments enfants en colonne. En savoir plus…

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

Propriétés

• add : Transition
• bottomPadding : real
• leftPadding : real
• move : Transition
• padding : real
• populate : Transition
• rightPadding : real
• spacing : real
• topPadding : real

Signaux

• positioningComplete()

Méthodes

• void forceLayout()

Description détaillée

Le type « Column » positionne ses éléments enfants le long d'une seule colonne. Il constitue un moyen pratique de positionner verticalement une série d'éléments sans utiliser d'ancrages.

Voici une « Column » contenant trois rectangles de tailles différentes :

Column {
    spacing: 2

    Rectangle { color: "red"; width: 50; height: 50 }
    Rectangle { color: "green"; width: 20; height: 50 }
    Rectangle { color: "blue"; width: 50; height: 20 }
}

La « Column » positionne automatiquement ces éléments verticalement, comme ceci :

Si un élément au sein d’une « Column » n’est pas « visible » ou s’il a une largeur ou une hauteur égale à 0, cet élément ne sera pas pris en compte dans la mise en page et ne sera pas visible au sein de la « Column ». De plus, comme une colonne positionne automatiquement ses éléments enfants à la verticale, un élément enfant au sein d’une colonne ne doit pas définir sa position « y » ni s’ancrer verticalement à l’aide des ancrages « top », « bottom », « anchors.verticalCenter », « fill » ou « centerIn ». Si vous devez effectuer ces actions, envisagez de positionner les éléments sans utiliser de colonne.

Notez que les éléments d’une colonne peuvent utiliser la propriété attachée ` Positioner ` pour accéder à davantage d’informations sur leur position au sein de la colonne.

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

Utilisation des transitions

Une colonne anime les éléments à l’aide de transitions spécifiques lorsque des éléments sont ajoutés à la colonne ou déplacés en son sein.

Par exemple, la colonne ci-dessous définit la propriété ` move ` sur une valeur spécifique : Transition:

Column {
    spacing: 2

    Rectangle { color: "red"; width: 50; height: 50 }
    Rectangle { id: greenRect; color: "green"; width: 20; height: 50 }
    Rectangle { color: "blue"; width: 50; height: 20 }

    move: Transition {
        NumberAnimation { properties: "x,y"; duration: 1000 }
    }

    focus: true
    Keys.onSpacePressed: greenRect.visible = !greenRect.visible
}

Lorsque la touche Espace est enfoncée, la valeur de la propriété « visible » de l’ Rectangle verte est inversée. Au fur et à mesure qu’elle apparaît et disparaît, l’ Rectangle bleue se déplace au sein de la colonne, et la transition « move » est automatiquement appliquée à l’ Rectangle bleue :

Voir également Row, Grid, Flow, Positioner, ColumnLayout 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 réaffectés en tant qu’enfants 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 deviennent ainsi 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 le remplissage autour du contenu.

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.

spacing : real

L'espacement correspond à la distance en pixels laissée libre entre deux éléments adjacents. L'espacement par défaut est 0.

Voir également Grid::spacing.

Documentation Signal

positioningComplete()

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

Documentation des méthodes

void forceLayout()

En règle générale, la balise `Column` repositionne 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 la balise `Column` n’ait pas encore été mise à jour en conséquence.

Cette méthode force la colonne à 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.