Listes différées dans une grille

Le composable Grid crée des mises en page structurelles en deux dimensions. Grid définit une structure de mise en page responsive à l'aide de pistes (lignes et colonnes) et d'espaces explicitement définis comme architecture de base de votre UI.

Comme Grid est un conteneur structurel plutôt qu'un conteneur à chargement différé, vous devez définir explicitement chaque élément qu'il contient sans recycler les éléments lors du défilement. Par conséquent, l'affichage d'ensembles de données volumineux ou dynamiques directement dans un Grid peut entraîner des goulots d'étranglement des performances, car tous les éléments sont composés simultanément.

Pour afficher de grandes collections de données dans une mise en page d'écran structurée, intégrez des composants différés tels que LazyColumn ou LazyRow dans vos cellules Grid. Remarque : Les pistes flexibles (avec des spécifications telles que 1.fr) interrogent les tailles intrinsèques des éléments enfants. Étant donné que SubcomposeLayout n'est pas compatible avec les passes de mesure intrinsèques, placer une liste différée dans une piste flexible entraîne un plantage IllegalStateException. Pour placer des listes différées dans une piste de grille flexible en toute sécurité, vous devez utiliser le dimensionnement GridTrackSize.MinMax (tel que minmax(0.dp, 1.fr)) pour contourner la passe de mesure intrinsèque.

Bonnes pratiques

• Utilisez des listes différées au lieu de grandes boucles explicites : pour afficher des ensembles de données volumineux ou dynamiques dans un Grid structuré, intégrez des composants différés (généralement LazyColumn ou LazyRow) dans des cellules de grille spécifiques plutôt que de créer de grandes boucles explicites sur les éléments, car Grid ne recycle pas les éléments et est limité à 1 000 pistes.
• Utilisez le dimensionnement de piste MinMax pour les listes différées : étant donné que LazyColumn et LazyRow ne sont pas compatibles avec les passes de mesure intrinsèques (voir SubcomposeLayout), utilisez GridTrackSize.MinMax sur les pistes flexibles hébergeant des composants différés pour contourner les mesures intrinsèques en toute sécurité.

Ingrédients

• Grid : mise en page composable qui place les éléments dans une structure de grille bidimensionnelle configurée à l'aide de pistes de lignes et de colonnes explicites.
• LazyColumn : liste à défilement vertical qui compose et recycle uniquement les éléments actuellement visibles à l'écran.
• GridTrackSize.MinMax : propriété de dimensionnement de la piste qui définit des limites flexibles (min et max) pour héberger en toute sécurité des composants différés sans déclencher de plantages de mesure d'exécution.
• gridItem : extension Compose Modifier qui attribue un élément d'interface utilisateur enfant à une cellule spécifique ou à une zone nommée dans un Grid.

Étapes

Structurez la mise en page de votre écran en définissant des identifiants de zone sémantique, en configurant des pistes de grille avec un dimensionnement minmax pour la compatibilité avec les listes différées et en intégrant LazyColumn dans la zone de contenu de la grille.

1. Configurer les pistes de grille et les zones nommées

Créez une classe enum pour représenter les différentes régions de la mise en page de votre écran, puis définissez un lambda GridConfigurationScope pour les pistes de mise en page et les zones nommées. Utilisez GridTrackSize.MaxContent pour que les lignes d'en-tête et de pied de page s'adaptent aux dimensions de leur contenu, et utilisez minmax(0.dp, 1.fr) pour la piste de contenu hébergeant la liste différée afin d'allouer un espace flexible sans interroger les mesures intrinsèques non compatibles :

enum class ScreenArea {
    Header,
    Content,
    Footer
}


val lazyConfig: GridConfigurationScope.() -> Unit = {
    column(minmax(0.dp, 1.fr))
    row(GridTrackSize.MaxContent)
    row(minmax(0.dp, 1.fr))
    row(GridTrackSize.MaxContent)

    area(ScreenArea.Header, row = 1, column = 1)
    area(ScreenArea.Content, row = 2, column = 1)
    area(ScreenArea.Footer, row = 3, column = 1)
    gap(8.dp)
}
GridByExamples.kt

2. Placer des composants statiques dans la grille

Dans votre composable, transmettez lazyConfig au conteneur Grid. Dans le lambda content, placez les composants statiques (Header et Footer) et positionnez-les à l'aide de Modifier.gridItem() avec leurs identifiants de zone respectifs.

3. Intégrer LazyColumn dans la zone de contenu

Dans la cellule de contenu, intégrez LazyColumn à l'aide de Modifier.gridItem(ScreenArea.Content). Étant donné que la piste de contenu a été configurée avec minmax(0.dp, 1.fr) à l'étape 1, LazyColumn peut mesurer et recycler les éléments en toute sécurité lors du défilement sans interroger les dimensions intrinsèques non compatibles :

@Composable
fun GridWithLazyColumn(
    modifier: Modifier = Modifier,
    items: List<String> = emptyList(),
) {
    Grid(
        modifier = modifier.fillMaxSize(),
        config = lazyConfig
    ) {
        Text("Header", Modifier.gridItem(ScreenArea.Header).padding(16.dp))
        Text("Footer", Modifier.gridItem(ScreenArea.Footer).padding(16.dp))

        // LazyColumn placed in the content area for large datasets
        LazyColumn(
            modifier = Modifier
                .gridItem(ScreenArea.Content)
                .fillMaxSize(),
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            items(items) { item ->
                Text(item, Modifier.padding(16.dp))
            }
        }
    }
}
GridByExamples.kt

Résultats

La mise en page de votre écran utilise désormais l'API Grid pour définir la structure globale de la page en deux dimensions, tout en intégrant un LazyColumn dans une piste flexible avec un dimensionnement minmax pour recycler efficacement les éléments de la liste et éviter les exceptions d'exécution.

Ressources supplémentaires

• Grille dans Jetpack Compose
• Définir les propriétés du conteneur
• Listes et grilles différées