Disposition en grille

Icône de note quatre étoiles

Cette recette montre comment l'API Grid améliore la lisibilité du code par rapport aux structures imbriquées traditionnelles. En configurant des pistes de taille automatique, vous pouvez créer une grille qui s'adapte de manière dynamique à la largeur et à la hauteur des cellules en fonction de la taille intrinsèque de vos composables de texte.

Dans cette recette, vous allez créer une table à l'aide de l'API Grid.

Tableau 1. Comparaison des fonctionnalités des API FlexBox et Grid
Mise en page Chargement différé Retour à la ligne automatique Mise à jour de la mise en page dynamique
FlexBox 1D Non Oui Oui
Grid 2D Non Non Oui

Bonnes pratiques

Utilisez le composable Grid pour améliorer la lisibilité et la gestion des tables. Grid vous permet de contrôler précisément les dimensions et l'alignement des colonnes sur toutes les lignes sans synchroniser manuellement les largeurs.

Ingrédients

  • Grid : mise en page composable qui place les éléments dans une grille bidimensionnelle. La configuration de la mise en page est spécifiée dans le paramètre lambda config, tandis que les éléments de contenu de l'interface utilisateur sont déclarés dans le paramètre lambda content.
  • GridTrackSize.Auto : spécifie le dimensionnement automatique des pistes dans la configuration de la grille en fonction de la taille intrinsèque du contenu, par exemple column(GridTrackSize.Auto) et row(GridTrackSize.Auto).
  • gap() : configure l'espacement des lignes et des colonnes dans GridConfigurationScope, par exemple gap(row = 8.dp, column = 16.dp).

Étapes

Créez un tableau de comparaison à plusieurs colonnes à l'aide d'une seule mise en page Grid avec alignement automatique des colonnes et dimensionnement des pistes pour tous les éléments.

1. Compter les lignes et les colonnes de la grille pour déterminer la taille des pistes

Tout d'abord, comptez vos colonnes et vos lignes pour déterminer la taille des pistes :

  • Colonnes : nombre d'attributs que vous comparez, plus une colonne pour le nom de l'élément.
  • Lignes : nombre d'éléments que vous comparez, plus une ligne d'en-tête.

Pour cette recette comparant deux composants (FlexBox et Grid) sur quatre attributs, vous avez besoin de cinq colonnes et de trois lignes.

2. Implémenter un tableau comparatif à l'aide de Grid

Créez un composable TableInGrid qui utilise Grid pour disposer les éléments de votre tableau. Appelez les fonctions column et row dans l'expression lambda config pour définir la taille des pistes, puis définissez l'espacement des cellules avec gap(). Comme le texte a une taille intrinsèque, GridTrackSize.Auto dimensionne automatiquement les colonnes et les lignes pour les adapter à leur contenu.

Dans le lambda content, placez les en-têtes et les données de votre tableau. Grid gère automatiquement l'emplacement et l'alignement de toutes les cellules :

@Composable
fun TableInGrid(
    modifier: Modifier = Modifier,
) {
    Grid(
        config = {
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            gap(row = 8.dp, column = 16.dp)
        },
        modifier = modifier,
    ) {
        // Table Header
        Text(text = "", fontWeight = FontWeight.Bold)
        Text(text = "Layout", fontWeight = FontWeight.Bold)
        Text(text = "Lazy loading", fontWeight = FontWeight.Bold)
        Text(text = "Soft wrap", fontWeight = FontWeight.Bold)
        Text(text = "Dynamic layout update", fontWeight = FontWeight.Bold)

        // FlexBox Row
        Text(text = "FlexBox", fontWeight = FontWeight.Bold)
        Text(text = "1D")
        Text(text = "No")
        Text(text = "Yes")
        Text(text = "Yes")

        // Grid Row
        Text(text = "Grid", fontWeight = FontWeight.Bold)
        Text(text = "2D")
        Text(text = "No")
        Text(text = "No")
        Text(text = "Yes")
    }
}

Résultats

Vous avez maintenant créé un tableau de comparaison bidimensionnel propre avec un alignement automatique des colonnes et un espacement des cellules.

Figure 1. Tableau comparatif utilisant un Grid.

Ressources supplémentaires