Hojas inferiores

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

Puedes usar el espacio content, que utiliza un ColumnScope para diseñar elementos componibles de contenido de hojas en una columna:

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

La expansión y contracción de la hoja de forma programática se realiza con SheetState. Puedes usar rememberSheetState 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 propiedades relacionadas con el estado actual de la hoja. Estas funciones de suspensión requieren un CoroutineScope (por ejemplo, mediante rememberCoroutineScope), y se puede llamar en respuesta a eventos de la IU. Asegúrate de quitar 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