FlexboxLayout QML Type

La construction QML FlexboxLayout fournit une disposition flexible pour les éléments rapides. Plus d'informations...

Ce type est en cours de développement et peut être modifié.

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

Propriétés

• alignContent : enumeration
• alignItems : enumeration
• columnGap : real
• direction : enumeration
• gap : real
• justifyContent : enumeration
• rowGap : real
• wrap : enumeration

Propriétés rattachées

• alignSelf : enumeration

Description détaillée

Le FlexboxLayout permet de mettre en page les éléments rapides de manière flexible, comme le fait le CSS Flexible Box Layout. En interne, Qt FlexboxLayout utilise le moteur Yoga pour dériver la géométrie des éléments flexibles. La bibliothèque Yoga est un sous-ensemble de la CSS Flexible Box Layout. Ainsi, FlexboxLayout peut être limité à la fonctionnalité prise en charge par la bibliothèque Yoga.

Les éléments du FlexboxLayout peuvent être configurés avec des tailles préférées, minimales et maximales par le biais des propriétés attachées à la mise en page existante. Par exemple, si les éléments d'un FlexboxLayout doivent être étirés, la propriété attachée à la mise en page Layout.fillWidth ou Layout.fillHeight peut être définie.

Les éléments d'un FlexboxLayout prennent en charge ces propriétés attachées :

• FlexboxLayout.alignSelf
• Layout.minimumWidth
• Layout.minimumHeight
• Layout.preferredWidth
• Layout.preferredHeight
• Layout.maximumWidth
• Layout.maximumHeight
• Layout.fillWidth
• Layout.fillHeight
• Layout.margins
• Layout.leftMargin
• Layout.rightMargin
• Layout.topMargin
• Layout.bottomMargin

Pour en savoir plus sur les propriétés attachées , cliquez ici.

Pour pouvoir utiliser ce type plus efficacement, il est recommandé de comprendre le mécanisme général du module Qt Quick Layouts. Pour plus d'informations, consultez le siteQt Quick Layouts Overview.

Exemple d'utilisation

L'extrait suivant montre un exemple minimaliste d'utilisation de QML FlexboxLayout pour organiser les éléments d'un rectangle de manière plus souple.

FlexboxLayout {
    id: flexLayout
    anchors.fill: parent
    wrap: FlexboxLayout.Wrap
    direction: FlexboxLayout.Row
    justifyContent: FlexboxLayout.JustifySpaceAround
    Rectangle {
        color: 'teal'
        implicitWidth: 200
        implicitHeight: 200
    }
    Rectangle {
        color: 'plum'
        implicitWidth: 200
        implicitHeight: 200
    }
    Rectangle {
        color: 'olive'
        implicitWidth: 200
        implicitHeight: 200
    }
    Rectangle {
        color: 'beige'
        implicitWidth: 200
        implicitHeight: 200
    }
    Rectangle {
        color: 'darkseagreen'
        implicitWidth: 200
        implicitHeight: 200
    }
}

Voir également ColumnLayout, GridLayout, RowLayout, StackView, et Qt Quick Layouts Overview.

Documentation sur les propriétés

alignContent : enumeration

Cette propriété spécifie la distribution des lignes de flexion le long de l'axe transversal de la mise en page de la boîte de flexion.

Valeurs possibles :

La valeur par défaut est FlexboxLayout.AlignStart.

alignItems : enumeration

Cette propriété spécifie l'alignement des éléments à l'intérieur des lignes flexibles de la mise en page de la boîte flexible et son alignement le long de l'axe transversal (qui est orthogonal à l'axe principal, tel que défini par la propriété direction). Cette propriété peut être remplacée par les éléments de la mise en page de la boîte flexible grâce à la propriété jointe FlexboxLayout.alignSelf.

Valeurs possibles :

La valeur par défaut est FlexboxLayout.AlignStart.

columnGap : real

Cette propriété indique la quantité d'espace qui doit être appliquée à FlexboxLayout le long de l'axe en ligne. La définition de cette propriété remplace la valeur de gap qui affecte l'axe en ligne.

La valeur par défaut est 0.

direction : enumeration

Cette propriété définit la direction de la mise en page de l'élément dans la boîte flexible ainsi que l'axe principal.

Valeurs possibles :

La valeur par défaut est FlexboxLayout.Row.

gap : real

Cette propriété indique la quantité d'espace qui doit être appliquée au site FlexboxLayout à la fois le long de l 'axe de la ligne et de l'axe du bloc.

La valeur par défaut est 0.

justifyContent : enumeration

Cette propriété spécifie la distribution des éléments le long de l'axe principal de la mise en page de la boîte flexible.

Valeurs possibles :

La valeur par défaut est FlexboxLayout.JustifyStart.

rowGap : real

Cette propriété indique la quantité d'espace qui doit être appliquée à FlexboxLayout le long de l'axe du bloc. La définition de cette propriété remplace la valeur de gap affectant l'axe du bloc.

La valeur par défaut est 0.

wrap : enumeration

Cette propriété spécifie si les éléments de la mise en page de la boîte flexible peuvent être enveloppés ou non et cela se produit lorsque les enfants dépassent la taille de la mise en page de la boîte flexible. Si les éléments sont enveloppés, ils seront placés sur plusieurs lignes en fonction de la condition de débordement indiquée. Chaque ligne prend la taille maximale de l'élément le long de l'axe transversal.

Valeurs possibles :

La valeur par défaut est FlexboxLayout.NoWrap.

Documentation sur les propriétés attachées

FlexboxLayout.alignSelf : enumeration

Cette propriété jointe permet d'aligner cet élément dans la disposition de la boîte flexible le long de l'axe transversal et remplace la propriété de disposition de la boîte flexible du parent alignItems.

Par défaut, l'élément enfant hérite de l'alignement du parent et peut remplacer la propriété de mise en page de la boîte flexible du parent alignItems par les valeurs FlexboxLayout.AlignStart, FlexboxLayout.AlignCenter et FlexboxLayout.AlignEnd.

La valeur par défaut est FlexboxLayout.AlignAuto.