Utiliser des encarts Material 3

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

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.

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 comme marge intérieure, car ils sont utilisés 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 des marges intérieures verticales et de début au contenu.
• ModalBottomSheet : applique les marges intérieures inférieures.
• NavigationBar : applique les marges intérieures inférieures et horizontales.
• NavigationRail: applique les marges intérieures verticale et 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. Cette responsabilité vous incombe. Par exemple, pour utiliser ces insets 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é:

Ignorer les marges intérieures 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 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