Bottom sheets

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 de la feuille dans une colonne:

ModalBottomSheet(onDismissRequest = { /* Executed when the sheet is dismissed */ }) {
    // Sheet content
}
MaterialLayoutSnippets.kt

Pour programmer l'affichage et la réduction de l'élément sheet, utilisez SheetState. Vous pouvez utiliser rememberSheetState pour créer une instance de SheetState qui doit être transmise à 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 de suspension nécessitent de définir leur CoroutineScope (par exemple, via 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.

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")
            }
        }
    }
}
MaterialLayoutSnippets.kt