Hojas inferiores

Ejemplo de una hoja inferior modal de Material Design 3.

Si quieres implementar una hoja inferior, puedes usar el elemento que admite composición ModalBottomSheet.

Puedes usar el espacio content, que usa un ColumnScope, para disponer en una columna elementos que admiten composición con contenido de hojas:

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

Cómo controlar el estado de la hoja de cálculo de forma programática

Para expandir y contraer la hoja de forma programática, usa 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 las puede llamar en respuesta a eventos de 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

Una hoja inferior modal en Jetpack Compose que muestra contenido.