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 la façon dont les composables sont placés dans votre application conformément aux spécifications Material.

Remarque : Les composants Material 2 (androidx.compose.material) ne gèrent pas automatiquement les encarts eux-mêmes. Cependant, vous pouvez accéder aux encarts et les appliquer manuellement. Dans androidx.compose.material 1.6.0 et version ultérieure, utilisez le paramètre windowInsets pour appliquer manuellement les encarts pour BottomAppBar, TopAppBar, BottomNavigation et NavigationRail. De même, utilisez le paramètre contentWindowInsets pour Scaffold. Dans le cas contraire, appliquez les encarts manuellement en tant que marge intérieure.

Composables de gestion des encarts

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

Barres d'application

• TopAppBar/ SmallTopAppBar/ CenterAlignedTopAppBar/ MediumTopAppBar/ LargeTopAppBar : applique les côtés supérieur et horizontal des barres système en tant que marge intérieure, car elle est utilisée 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 à l'intérieur d'un panneau de navigation modal) : applique des encarts verticaux et de début au contenu.
• ModalBottomSheet : applique les encarts bottom.
• NavigationBar : applique les encarts bottom et horizontal.
• NavigationRail : applique les encarts vertical et start.

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 consommer ces encarts avec un LazyColumn à l'intérieur d'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é :

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