Conteneurs de mise en page

Jetpack Compose fournit plusieurs conteneurs de mise en page pour vous aider à structurer et à organiser vos composants d'interface utilisateur. Bien que les composables de mise en page fondamentaux tels que Row et Column gèrent des dispositions simples, de nombreuses applications nécessitent des solutions de conteneur plus responsives et adaptatives à mesure que la taille de l'écran change et que les données utilisateur augmentent.

Les conteneurs de mise en page incluent les éléments suivants :

  • Listes et grilles différées : composants tels que LazyColumn, LazyRow et LazyVerticalGrid qui affichent efficacement des ensembles de données volumineux ou de taille dynamique en composant et en disposant uniquement les éléments actuellement visibles dans la fenêtre d'affichage.
  • Pager : conteneurs tels que HorizontalPager et VerticalPager qui permettent aux utilisateurs de balayer ou de faire défiler les pages de contenu.
  • Mises en page de flux : conteneurs unidimensionnels responsifs (FlowRow et FlowColumn) qui renvoient automatiquement les éléments qui dépassent à la ligne ou à la colonne suivante lorsque l'espace est insuffisant.
  • Grille : structure flexible en deux dimensions qui affiche les éléments dans des mises en page à plusieurs colonnes ou plusieurs lignes qui s'adaptent à la taille du conteneur.
  • FlexBox : conteneur adaptatif inspiré de CSS Flexbox, qui permet de contrôler de manière précise la façon dont les éléments s'ajustent, s'agrandissent, se réduisent et s'alignent le long des axes principal et transversal pour remplir l'espace disponible.

Choisir le bon conteneur de mise en page

Lorsque vous créez des mises en page dans Compose, le choix entre des conteneurs de mise en page de base et des conteneurs plus avancés dépend de votre conception, de la nécessité de renvoyer les éléments à la ligne lorsque l'espace est limité et de la façon dont les éléments sont redimensionnés de manière dynamique.

Le tableau suivant récapitule les fonctionnalités de chacun des conteneurs de mise en page Compose 1D :

Conteneur

Renvoie les éléments à la ligne

Croissance par élément

Réduction par article

Taille de départ par élément

Les éléments s'agrandissent pour remplir l'espace disponible sur plusieurs lignes

Modifier l'ordre des éléments

Chargement différé

Recommandé pour :

Ligne / Colonne

❌

✅ (via weight) une seule ligne

❌

❌

❌

❌

❌
  • Lignes uniformes avec un petit nombre fixe d'éléments. Les éléments s'ajustent aux limites disponibles et n'ont pas besoin d'être répartis sur plusieurs lignes.

FlowRow / FlowColumn

✅

Limité

❌

❌

Partielle

❌

❌
  • Remplacé par FlexBox.

LazyRow / LazyColumn

❌

❌

❌

❌

❌

❌

✅
  • Listes d'éléments longues ou infinies où seuls les éléments visibles doivent être affichés pour optimiser les performances.
  • Ensembles de données dynamiques ou volumineux défilant dans une seule direction.

FlexBox

✅

✅

✅

✅

✅

✅

❌
  • Mises en page nécessitant des fonctionnalités adaptatives, telles que la spécification de la taille initiale, l'agrandissement/la réduction dynamique des éléments (grow/shrink), la réorganisation visuelle (order) ou l'alignement sur l'axe transversal au niveau des éléments (alignSelf).
  • Organiser des éléments de différentes tailles.

Le tableau suivant récapitule les fonctionnalités de Grid et d'autres composables similaires :

Conteneur

Alignement 2D strict

Étendue de l'élément (colonnes)

Étendue de l'élément (lignes)

Chargement différé

Recommandé pour :

Grille

✅

✅ (via GridArea)

✅

❌
  • Mises en page structurelles en deux dimensions où tous les éléments sont à l'écran et nécessitent un alignement horizontal et vertical explicite.
  • Restructurer les mises en page de manière adaptative en fonction de la taille de l'écran

LazyVerticalGrid

✅

✅ (via span)

❌

✅
  • Flux à défilement vertical et grands catalogues nécessitant des colonnes.

LazyStaggeredGrid

❌ (1D uniquement)

Partielle (uniquement sur toute la durée)

❌

✅
  • Flux à défilement avec des éléments de hauteur variable.

LazyHorizontalGrid

✅

❌

✅

✅
  • Carrousels à défilement horizontal ou données paginées sur plusieurs lignes.

Combiner des lignes et des colonnes

❌

❌

❌

❌
  • Assemblage de composants simples, comme placer une étiquette de texte à côté d'une icône.
Précédent
Liste des modificateurs
Suivant
Listes et grilles différées