Superpositions d'éléments d'interface utilisateur avec Grid

L'API Grid de Jetpack Compose est conçue pour les mises en page d'écran bidimensionnelles et structurelles. Contrairement aux grilles paresseuses, qui sont optimisées pour les grands ensembles de données, Grid vous permet de définir une structure de mise en page fixe ou adaptative à l'aide de pistes (lignes et colonnes), d'espaces et de zones de grille. Vous placez des éléments dans cette structure à l'aide de Modifier.gridItem, ce qui vous permet de contrôler explicitement le positionnement et l'étendue dans le conteneur de grille.

Lorsque votre interface utilisateur nécessite plusieurs éléments dans la même zone de grille ou dans des zones qui se chevauchent (par exemple, des badges, des indicateurs d'état ou des cartes superposées), l'ambiguïté de la coordination peut rendre le comportement de la mise en page imprévisible. Il est essentiel de gérer la profondeur des composants qui se chevauchent sans recourir à une imbrication Box complexe ni à des décalages de coordonnées manuels pour maintenir un code de mise en page propre et lisible.

Bonnes pratiques

• Ordre de déclaration : Grid suit l'ordre zIndex standard en fonction de l'ordre de déclaration dans le bloc Grid. Les éléments déclarés plus tard dans le bloc de contenu Grid sont affichés au-dessus des éléments déclarés plus tôt.
• Contrôle explicite de l'index Z : utilisez Modifier.zIndex si vous devez contrôler ou remplacer explicitement l'ordre de dessin par défaut des éléments qui se chevauchent.
• Zone nommée par rapport aux superpositions d'éléments : utilisez Grid et des zones nommées pour définir la structure de votre mise en page, mais conservez la logique de superposition complexe dans le gridItem spécifique si ces superpositions sont liées logiquement à cette cellule de grille.
• Étendues intentionnelles pour les superpositions : lors de la superposition, assurez-vous que les paramètres rowSpan et columnSpan sont intentionnels pour les éléments qui se chevauchent afin de contrôler la quantité de contenu sous-jacent masquée.

Ingrédients

• Grid: conteneur de mise en page bidimensionnel et structurel
• GridConfigurationScope.area: fonction de portée utilisée pour définir des régions nommées et des zones de superposition sur les pistes de grille
• Modifier.gridItem: modificateur utilisé pour placer et étendre des composables sur des pistes de grille ou dans des zones de grille nommées
• Modifier.zIndex: modificateur utilisé pour contrôler explicitement l'ordre de dessin et d'élévation des calques

Étapes

Configurez votre mise en page de grille et vos zones nommées, positionnez le contenu du calque de base dans les coordonnées de grille cibles et placez les éléments de superposition dans les cellules de grille partagées ou les zones qui se chevauchent.

1. Définir la configuration de la grille

Créez une configuration composable Grid spécifiant les pistes de ligne et de colonne, ainsi que les zones nommées qui s'étendent sur les cellules pour définir les régions de superposition :

enum class Areas { BASE, OVERLAY }

val gridConfig: GridConfigurationScope.() -> Unit = {
    repeat(3) {
        column(GridTrackSize.Fixed(100.dp))
    }
    row(GridTrackSize.Fixed(100.dp))

    area(areaId = Areas.BASE, row = 1, column = 1, columnSpan = 2)
    // Define a named area spanning multiple columns that overlaps other cells
    area(areaId = Areas.OVERLAY, row = 1, column = 2, columnSpan = 2)
}
GridByExamples.kt

2. Placer le contenu de base et déclarer les superpositions

Placez vos composables de base dans les cellules de la grille à l'aide de Modifier.gridItem. Grid suit l'ordre zIndex standard en fonction de l'ordre de composition. Les éléments déclarés plus tard dans le bloc Grid sont donc dessinés au-dessus des éléments précédents. Lorsque vous placez une superposition dans la même cellule ou dans une zone qui se chevauche, déclarez le composable de superposition après l'élément de base ou référencez une zone nommée. Vous pouvez utiliser Modifier.zIndex si vous devez contrôler ou remplacer explicitement cet ordre de dessin par défaut.

Grid(
    config = gridConfig,
) {
    // Base Layer
    TextCard("BASE", Modifier.gridItem(areaId = Areas.BASE))
    // Overlay Layer
    TextCard(
        "OVERLAY",
        Modifier.gridItem(areaId = Areas.OVERLAY),
        color = Color(0xDD4B608D)
    )
}
GridByExamples.kt

Résultats

Vos éléments d'interface utilisateur se superposent de manière prévisible dans la structure de grille 2D. En vous appuyant sur l'ordre de déclaration standard, vous évitez les conteneurs imbriqués complexes tout en conservant un code de mise en page propre et adaptatif.