Si vous souhaitez implémenter une bottom sheet, vous pouvez utiliser le composable ModalBottomSheet.
Vous pouvez utiliser l'emplacement content, qui utilise un ColumnScope pour mettre en page les composables de contenu d'une feuille dans une colonne:
ModalBottomSheet(onDismissRequest = { /* Executed when the sheet is dismissed */ }) {
// Sheet content
}
L'expansion et la réduction de la feuille de calcul sont effectuées à l'aide de SheetState. Vous pouvez utiliser rememberSheetState pour créer une instance de SheetState qui doit être transmise à ModalBottomSheet avec le paramètre sheetState. SheetState permet d'accéder aux fonctions show et hide, ainsi qu'aux propriétés liées à l'état actuel de la feuille. Ces fonctions de suspension nécessitent un CoroutineScope (par exemple, à l'aide de rememberCoroutineScope) et peuvent être appelées en réponse à des événements de l'interface utilisateur. Veillez à supprimer ModalBottomSheet de la composition lorsque vous masquez la bottom sheet.
val sheetState = rememberModalBottomSheetState()
val scope = rememberCoroutineScope()
var showBottomSheet by remember { mutableStateOf(false) }
Scaffold(
floatingActionButton = {
ExtendedFloatingActionButton(
text = { Text("Show bottom sheet") },
icon = { Icon(Icons.Filled.Add, contentDescription = "") },
onClick = {
showBottomSheet = true
}
)
}
) { contentPadding ->
// Screen content
if (showBottomSheet) {
ModalBottomSheet(
onDismissRequest = {
showBottomSheet = false
},
sheetState = sheetState
) {
// Sheet content
Button(onClick = {
scope.launch { sheetState.hide() }.invokeOnCompletion {
if (!sheetState.isVisible) {
showBottomSheet = false
}
}
}) {
Text("Hide bottom sheet")
}
}
}
}
