Hojas inferiores

Si quieres implementar una hoja inferior, puedes usar el elemento componible ModalBottomSheet.

Puedes usar la ranura content, que utiliza un ColumnScope para diseñar elementos componibles de contenido de la hoja en una columna:

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

Controla el estado de la hoja de manera programática

Para expandir y contraer la hoja de manera programática, usa SheetState. Puedes usar rememberModalBottomSheetState para crear una instancia de SheetState que se debe pasar a ModalBottomSheet con el parámetro sheetState. SheetState proporciona acceso a las funciones show y hide, así como a las propiedades relacionadas con el estado actual de la hoja. Estas funciones de suspensión requieren un CoroutineScope, por ejemplo, con rememberCoroutineScope, y puedes llamarlas en respuesta a eventos de la IU. Asegúrate de quitar el ModalBottomSheet de la composición cuando ocultes la hoja inferior.

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