Hoja inferior parcial

Puedes mostrar una hoja inferior de forma parcial y, luego, permitir que el usuario la muestre en pantalla completa o la oculte.

Para ello, pasa a tu ModalBottomSheet una instancia de SheetState con skipPartiallyExpanded configurado como false.

Ejemplo

En este ejemplo, se muestra cómo puedes usar la propiedad sheetState de ModalBottomSheet para mostrar la hoja solo de forma parcial al principio:

@Composable
fun PartialBottomSheet() {
    var showBottomSheet by remember { mutableStateOf(false) }
    val sheetState = rememberModalBottomSheetState(
        skipPartiallyExpanded = false,
    )

    Column(
        modifier = Modifier.fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Button(
            onClick = { showBottomSheet = true }
        ) {
            Text("Display partial bottom sheet")
        }

        if (showBottomSheet) {
            ModalBottomSheet(
                modifier = Modifier.fillMaxHeight(),
                sheetState = sheetState,
                onDismissRequest = { showBottomSheet = false }
            ) {
                Text(
                    "Swipe up to open sheet. Swipe down to dismiss.",
                    modifier = Modifier.padding(16.dp)
                )
            }
        }
    }
}
BottomSheet.kt

Puntos clave sobre el código

En este ejemplo, ten en cuenta lo siguiente:

• showBottomSheet controla si la app muestra la hoja inferior.
• sheetState es una instancia de SheetState en la que skipPartiallyExpanded es falso.
• ModalBottomSheet toma un modificador que garantiza que ocupe toda la pantalla cuando se expanda por completo.
• ModalBottomSheet toma sheetState como el valor de su parámetro sheetState.
  • Como resultado, la hoja solo se muestra parcialmente cuando se abre por primera vez. Luego, el usuario puede arrastrarla o deslizarla para que se muestre en pantalla completa o para descartarla.
• La lambda onDismissRequest controla lo que sucede cuando el usuario intenta cerrar la hoja inferior. En este caso, solo quita la hoja.

Resultados

Cuando el usuario presiona el botón por primera vez, la hoja se muestra de forma parcial:

Si el usuario desliza el dedo hacia arriba en la hoja, esta ocupa toda la pantalla:

Recursos adicionales

• Hojas inferiores