FlexboxLayout QML Type

La construction QML « FlexboxLayout » permet de créer une mise en page flexible pour les éléments rapides. En savoir plus…

Ce type est en préversion technologique et est susceptible d'ê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 associées

• alignSelf : enumeration

Description détaillée

FlexboxLayout permet de disposer les éléments de manière flexible, à l'instar de la mise en page CSS Flexible Box Layout. En interne, Qt FlexboxLayout utilise le moteur Yoga pour déterminer la géométrie des éléments flexibles. La bibliothèque yoga est un sous-ensemble de la mise en page CSS Flexible Box. Par conséquent, FlexboxLayout peut se limiter aux fonctionnalités prises en charge par la bibliothèque yoga.

Les éléments contenus dans le FlexboxLayout peuvent être configurés avec des tailles préférées, minimales et maximales via les propriétés associées à la mise en page existantes. Par exemple, si un élément du FlexboxLayout doit être étiré, il est possible de définir la propriété associée à la mise en page « Layout.fillWidth » ou « Layout.fillHeight ».

Les éléments d’un FlexboxLayout prennent en charge les propriétés associées suivantes :

• 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 associées, cliquez ici.

Pour utiliser ce type de manière plus efficace, il est recommandé de bien comprendre le fonctionnement général du module « Qt Quick Layouts ». Reportez-vous à la présentation d’Qt Quick Layouts pour plus d’informations.

Exemple d'utilisation

L'extrait de code suivant présente un exemple minimaliste d'utilisation de QML FlexboxLayout pour organiser les éléments rectangulaires de manière plus flexible

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 la présentation deQt Quick Layouts .

Documentation sur les propriétés

alignContent : enumeration

Cette propriété définit la répartition des lignes de flex le long de l 'axe transversal de la mise en page Flexbox.

Valeurs possibles :

La valeur par défaut est ` FlexboxLayout.AlignStart`.

alignItems : enumeration

Cette propriété spécifie l'alignement des éléments au sein des lignes flexibles de la mise en page « flex box » ; elle s'effectue le long de l'axe transversal (orthogonal à l'axe principal, tel que défini par la propriété ` direction`). Cette propriété peut être redéfinie par les éléments de la mise en page « flex box » via la propriété associée ` FlexboxLayout.alignSelf`.

Valeurs possibles :

La valeur par défaut est « FlexboxLayout.AlignStart ».

columnGap : real

Cette propriété définit l'espace à appliquer à l'élément ` FlexboxLayout ` le long de l'axe inline. La définition de cette propriété remplace la valeur de ` gap ` affectant l'axe inline.

La valeur par défaut est « 0 ».

direction : enumeration

Cette propriété détermine le sens de disposition des éléments au sein de la mise en page Flexbox et définit l'axe principal.

Valeurs possibles :

La valeur par défaut est « FlexboxLayout.Row ».

gap : real

Cette propriété définit l'espace à attribuer à l'élément ` FlexboxLayout `, tant sur l'axe « inline » que sur l'axe « block ».

La valeur par défaut est « 0 ».

justifyContent : enumeration

Cette propriété définit la répartition des éléments le long de l'axe principal de la mise en page Flexbox.

Valeurs possibles :

La valeur par défaut est « FlexboxLayout.JustifyStart ».

rowGap : real

Cette propriété définit l'espace à appliquer à l'FlexboxLayout e le long de l'axe du bloc. La définition de cette propriété remplace la valeur de la propriété « gap » affectant l'axe du bloc.

La valeur par défaut est « 0 ».

wrap : enumeration

Cette propriété spécifie si les éléments d'une mise en page Flexbox peuvent ou non être répartis sur plusieurs lignes ; cela se produit lorsque la taille des éléments enfants dépasse celle de la mise en page Flexbox. Si les éléments sont répartis sur plusieurs lignes, ils seront placés sur plusieurs lignes en fonction de la condition de débordement indiquée. Chaque ligne occupe 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 associées

FlexboxLayout.alignSelf : enumeration [attached]

Cette propriété associée permet d'aligner cet élément dans la mise en page Flexbox le long de l'axe transversal et remplace la propriété de mise en page Flexbox du parent « alignItems ».

Par défaut, l’élément enfant hérite de l’alignement de son parent et peut remplacer la propriété de mise en page Flexbox du parent ` alignItems ` avec les valeurs ` FlexboxLayout.AlignStart`, ` FlexboxLayout.AlignCenter ` et ` FlexboxLayout.AlignEnd`.

La valeur par défaut est « FlexboxLayout.AlignAuto ».