Bottom sheets

Exemple de bottom sheet modale Material Design 3.

Si vous souhaitez implémenter une bottom sheet, vous pouvez utiliser le composable ModalBottomSheet.

Vous pouvez utiliser l'emplacement content, qui utilise 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
}
MaterialLayoutSnippets.kt

Contrôler l'état de la feuille de calcul par programmation

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 la feuille. 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 feuille inférieure.

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

Feuille inférieure modale dans Jetpack Compose affichant du contenu.