Utiliser des encarts Material 3

Pour faciliter l'utilisation, de nombreux composables Material 3 intégrés (androidx.compose.material3) gèrent eux-mêmes les encarts, en fonction de leur emplacement dans votre application conformément aux spécifications Material.

Composables de gestion des encarts

Voici une liste des composants Material qui gèrent automatiquement les encarts.

Barres d'application

• TopAppBar / CenterAlignedTopAppBar / MediumTopAppBar / LargeTopAppBar : applique les côtés supérieur et horizontal des barres système en tant que marge intérieure, car il est utilisé en haut de la fenêtre.
• BottomAppBar: applique les côtés inférieur et horizontal des barres système en tant que marge intérieure.

Conteneurs

• ModalDrawerSheet / DismissibleDrawerSheet / PermanentDrawerSheet (contenu dans un panneau de navigation modal) : applique les encarts verticaux et de début au contenu.
• ModalBottomSheet: applique les encarts inférieurs.
• NavigationBar: applique les encarts inférieurs et horizontaux.
• NavigationRail: applique les encarts verticaux et de début.

Scaffold

Par défaut, Scaffold fournit des encarts en tant que paramètre PaddingValues que vous pouvez utiliser. Scaffold n'applique pas les encarts au contenu. C'est à vous de le faire. Par exemple, pour utiliser ces encarts avec un LazyColumn dans un Scaffold :

Scaffold { innerPadding ->
    // innerPadding contains inset information for you to use and apply
    LazyColumn(
        // consume insets as scaffold doesn't do it by default
        modifier = Modifier.consumeWindowInsets(innerPadding),
        contentPadding = innerPadding
    ) {
        // ..
    }
}
InsetsSnippets.kt

La vidéo suivante montre un LazyColumn dans un Scaffold avec l'affichage bord à bord désactivé et activé :

L'utilisation du paramètre PaddingValues dans Scaffold suffit généralement à insérer votre UI en dehors de l'UI système et à afficher les découpes. Évitez d'utiliser des approches de gestion des encarts supplémentaires, telles que des règles, des modificateurs de marge intérieure ou des modificateurs de taille d'encart si vous utilisez Scaffold, afin de ne pas appliquer trop de marge intérieure à votre UI.

Remplacer les encarts par défaut

Vous pouvez modifier le paramètre windowInsets transmis au composable pour configurer son comportement. Ce paramètre peut être un autre type d'encart de fenêtre à appliquer à la place, ou il peut être désactivé en transmettant une instance vide : WindowInsets(0, 0, 0, 0).

Par exemple, pour désactiver la gestion des encarts sur LargeTopAppBar, définissez le paramètre windowInsets sur une instance vide :

LargeTopAppBar(
    windowInsets = WindowInsets(0, 0, 0, 0),
    title = {
        Text("Hi")
    }
)
InsetsSnippets.kt