Créer une bottom sheet
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Une bottom sheet affiche du contenu secondaire, ancré en bas de l'écran.
Compatibilité des versions
Cette implémentation nécessite que la version minimale du SDK de votre projet soit définie sur le niveau d'API 21 ou supérieur.
Dépendances
Implémenter une bottom sheet
Pour implémenter une bottom sheet, utilisez le composable ModalBottomSheet:
Développer et réduire la feuille
Pour développer et réduire la feuille, utilisez SheetState:
Points essentiels
- Utilisez l'emplacement
content, qui utilise ColumnScope pour mettre en page les composables de contenu d'une bottom sheet dans une colonne.
- Utilisez
rememberSheetState pour créer une instance de SheetState que vous transmettez à ModalBottomSheet avec le paramètre sheetState.
SheetState fournit un accès aux fonctions show et hide, ainsi qu'aux propriétés liées à l'état actuel de l'élément sheet. Ces fonctions nécessitent de définir leur CoroutineScope (par exemple, rememberCoroutineScope) et peuvent être appelées en réponse à des événements d'interface utilisateur.
Veillez à supprimer ModalBottomSheet de la composition lorsque vous masquez la bottom sheet.
Résultats
Figure 1 Une bottom sheet standard (à gauche) et une bottom sheet modale (à droite).
Collections contenant ce guide
Ce guide fait partie de ces collections de guides rapides sélectionnées qui couvrent des objectifs de développement Android plus larges:
Afficher des composants interactifs
Découvrez comment les fonctions composables peuvent vous permettre de créer facilement de beaux composants d'interface utilisateur basés sur le système de conception Material Design.
Le contenu et les exemples de code de cette page sont soumis aux licences décrites dans la Licence de contenu. Java et OpenJDK sont des marques ou des marques déposées d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/02/06 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 2025/02/06 (UTC)."],[],[],null,["# Create a bottom sheet\n\n\u003cbr /\u003e\n\nA bottom sheet shows secondary content, anchored to the bottom of the screen.\n\nVersion compatibility\n---------------------\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\n### Dependencies\n\n### Kotlin\n\n\u003cbr /\u003e\n\n```kotlin\n implementation(platform(\"androidx.compose:compose-bom:2025.08.00\"))\n \n```\n\n\u003cbr /\u003e\n\n### Groovy\n\n\u003cbr /\u003e\n\n```groovy\n implementation platform('androidx.compose:compose-bom:2025.08.00')\n \n```\n\n\u003cbr /\u003e\n\nImplement a bottom sheet\n------------------------\n\nTo implement a [bottom sheet](https://m3.material.io/components/bottom-sheets/overview), use the [`ModalBottomSheet`](/reference/kotlin/androidx/compose/material3/package-summary#ModalBottomSheet(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.material3.SheetState,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,kotlin.Function0,kotlin.Function0,androidx.compose.material3.ModalBottomSheetProperties,kotlin.Function1))\ncomposable:\n\n\u003cbr /\u003e\n\n```kotlin\nModalBottomSheet(onDismissRequest = { /* Executed when the sheet is dismissed */ }) {\n // Sheet content\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/layouts/MaterialLayoutSnippets.kt#L364-L366\n \n```\n\n\u003cbr /\u003e\n\nExpand and collapse the sheet\n-----------------------------\n\nTo expand and collapse the sheet, use [`SheetState`](/reference/kotlin/androidx/compose/material3/SheetState):\n\n\u003cbr /\u003e\n\n```kotlin\nval sheetState = rememberModalBottomSheetState()\nval scope = rememberCoroutineScope()\nvar showBottomSheet by remember { mutableStateOf(false) }\nScaffold(\n floatingActionButton = {\n ExtendedFloatingActionButton(\n text = { Text(\"Show bottom sheet\") },\n icon = { Icon(Icons.Filled.Add, contentDescription = \"\") },\n onClick = {\n showBottomSheet = true\n }\n )\n }\n) { contentPadding -\u003e\n // Screen content\n\n if (showBottomSheet) {\n ModalBottomSheet(\n onDismissRequest = {\n showBottomSheet = false\n },\n sheetState = sheetState\n ) {\n // Sheet content\n Button(onClick = {\n scope.launch { sheetState.hide() }.invokeOnCompletion {\n if (!sheetState.isVisible) {\n showBottomSheet = false\n }\n }\n }) {\n Text(\"Hide bottom sheet\")\n }\n }\n }\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/layouts/MaterialLayoutSnippets.kt#L370-L408\n \n```\n\n\u003cbr /\u003e\n\n### Key points\n\n- Use the `content` slot, which uses a [`ColumnScope`](/reference/kotlin/androidx/compose/foundation/layout/ColumnScope) to lay out sheet content composables in a column.\n- Use [`rememberSheetState`](/reference/kotlin/androidx/compose/material3/package-summary#rememberSheetState(kotlin.Boolean,kotlin.Function1)) to create an instance of `SheetState` that you pass to `ModalBottomSheet` with the `sheetState` parameter.\n- `SheetState` provides access to the [`show`](/reference/kotlin/androidx/compose/material3/SheetState#show()) and [`hide`](/reference/kotlin/androidx/compose/material3/SheetState#hide()) functions\n and to properties related to the current sheet state. These functions\n require a `CoroutineScope` --- for example, [`rememberCoroutineScope`](/reference/kotlin/androidx/compose/runtime/package-summary#remembercoroutinescope) ---\n and can be called in response to UI events.\n\n- Make sure to remove the `ModalBottomSheet` from composition when you hide\n the bottom sheet.\n\nResults\n-------\n\n\n**Figure 1.** A standard bottom sheet (left) and a modal bottom sheet (right).\n\n\u003cbr /\u003e\n\nCollections that contain this guide\n-----------------------------------\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\n### Display interactive components\n\nLearn how composable functions can enable you to easily create beautiful UI components based on the Material Design design system. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-interactive-components) \n\nHave questions or feedback\n--------------------------\n\nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]
