Découvrez comment utiliser efficacement le FlexLayout avec .NET MAUI pour organiser et aligner les éléments de votre interface utilisateur de manière flexible et réactive, avec des exemples pratiques et des conseils d'utilisation.
Introduction au FlexLayout
Le FlexLayout est un conteneur puissant utilisé dans .NET MAUI pour disposer les éléments enfants horizontalement ou verticalement, et il peut également les envelopper si nécessaire (mode wrap). Inspiré par le module de boîte flexible (Flexbox) de CSS, FlexLayout
permet une grande flexibilité dans l'organisation des éléments visuels. Ce n'est pas le conteneur visuel le plus bizarre mais ce n'est pas forcément le plus simple non plus, mais il autorise des mises en page impossibles à réaliser avec les conteneurs plus simples comme Grid
ou StackLayout
.

Propriétés principales du FlexLayout
Les principales propriétés de FlexLayout incluent :
- AlignContent
: Détermine la distribution de l'espace entre et autour des enfants sur plusieurs lignes.
- AlignItems
: Contrôle l'alignement des enfants le long de l'axe transversal.
- Direction
: Définit l'axe principal des enfants (horizontal ou vertical).
- JustifyContent
: Spécifie comment l'espace est distribué le long de l'axe principal.
- Wrap
: Contrôle si les enfants sont disposés sur une seule ligne ou sur plusieurs lignes.
Voici un exemple d'utilisation de ces propriétés en XAML :
<FlexLayout Direction="Row"
Wrap="Wrap"
JustifyContent="SpaceBetween"
AlignItems="Center">
<Label Text="Élément 1" />
<Label Text="Élément 2" />
<Label Text="Élément 3" />
</FlexLayout>
Alignement et disposition des enfants
Les enfants d'un FlexLayout peuvent être alignés et disposés en utilisant plusieurs propriétés spécifiques :
- AlignSelf
: Permet d'aligner un enfant individuellement par rapport à ses frères.
- Order
: Détermine l'ordre de disposition des enfants.
- Basis
: Définit la taille initiale d'un enfant sur l'axe principal.
- Grow
: Spécifie l'espace disponible qu'un enfant peut utiliser.
- Shrink
: Contrôle comment un enfant peut rétrécir pour s'adapter à l'espace disponible.
Exemple en XAML pour l'utilisation de certaines de ces propriétés :
<FlexLayout>
<Label Text="Élément 1" FlexLayout.Order="1" />
<Label Text="Élément 2" FlexLayout.Grow="1" />
<Label Text="Élément 3" FlexLayout.Shrink="1" />
</FlexLayout>
Exemples d'utilisation
- Disposition en pile :
<FlexLayout Direction="Column"
AlignItems="Center"
JustifyContent="Center">
<Label Text="Élément 1" />
<Label Text="Élément 2" />
<Label Text="Élément 3" />
</FlexLayout>
- Disposition avec enveloppement :
<FlexLayout Direction="Row"
Wrap="Wrap"
JustifyContent="SpaceAround">
<Image Source="image1.png" />
<Image Source="image2.png" />
<Image Source="image3.png" />
</FlexLayout>
- Disposition en grilles flexibles imbriquées :
<FlexLayout Direction="Column">
<Label Text="En-tête" />
<FlexLayout Direction="Row" Grow="1">
<BoxView Color="Blue" FlexLayout.Basis="50" />
<Label Text="Contenu principal" FlexLayout.Grow="1" />
<BoxView Color="Green" FlexLayout.Basis="50" />
</FlexLayout>
<Label Text="Pied de page" />
</FlexLayout>
Conclusion
Le FlexLayout dans .NET MAUI offre des capacités étendues pour organiser et aligner les éléments dans une interface utilisateur de manière flexible et réactive. En comprenant et en utilisant ses propriétés, vous pouvez créer des interfaces complexes et élégantes adaptées à diverses tailles d'écran et résolutions. On remarquera son mode "wrap" qui permet de distribuer les enfants d'une façon qu'aucun autre conteneur n'offre. Mais pour bien le comprendre il faut le tester soi-même. A vos claviers !
Pour plus de détails et d'exemples, vous pouvez consulter la documentation officielle de FlexLayout dans .NET MAUI.
Stay Tuned !