Puedes mostrar parcialmente una hoja inferior y, luego, permitir que el usuario la muestre en pantalla completa o la descarte.
Para ello, pasa 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) ) } } } }
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 deSheetState
en la queskipPartiallyExpanded
es falso.ModalBottomSheet
toma un modificador que garantiza que llene la pantalla cuando se expanda por completo.ModalBottomSheet
tomasheetState
como el valor de su parámetrosheetState
.- 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 descartarla.
- La lambda
onDismissRequest
controla lo que sucede cuando el usuario intenta descartar la hoja inferior. En este caso, solo se quita la hoja.
Resultados
Cuando el usuario presiona el botón por primera vez, la hoja se muestra parcialmente:

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