Disposition en grille

Cette recette montre comment l'API Grid améliore la lisibilité du code par rapport aux structures imbriquées traditionnelles. En configurant des pistes à dimensionnement automatique, vous pouvez créer une grille qui s'adapte dynamiquement à 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 un tableau à l'aide de l'API Grid.

Bonnes pratiques

Utilisez le Grid composable pour améliorer la lisibilité et la maintenabilité du tableau. 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 comparatif à plusieurs colonnes à l'aide d'une seule mise en page Grid avec un alignement automatique des colonnes et un dimensionnement des pistes pour tous les éléments.

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

Commencez par compter les colonnes et les 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 qui compare deux composants (FlexBox et Grid) sur quatre attributs, vous avez besoin de cinq colonnes et de trois lignes.

2. Implémentez le 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 le lambda config pour définir la taille des pistes, et 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 le placement 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")
    }
}
GridByExamples.kt

Résultats

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

Ressources supplémentaires

• Grille dans Compose
• Définir les propriétés du conteneur