Puoi mostrare parzialmente un riquadro inferiore e poi consentire all'utente di farlo a schermo intero o ignorarla.
Per farlo, passa alla tua ModalBottomSheet
un'istanza di SheetState
con skipPartiallyExpanded
impostato su false
.
Esempio
Questo esempio mostra come utilizzare la proprietà sheetState
di
ModalBottomSheet
per visualizzare il foglio solo parzialmente all'inizio:
@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) ) } } } }
Punti chiave sul codice
In questo esempio, tieni presente quanto segue:
showBottomSheet
consente di stabilire se visualizzare o meno il riquadro inferiore nell'app.sheetState
è un'istanza diSheetState
in cuiskipPartiallyExpanded
è falso.ModalBottomSheet
utilizza un modificatore che riempie lo schermo quando viene completamente espanso.ModalBottomSheet
prendesheetState
come valore per il suosheetState
.- Di conseguenza, il foglio viene visualizzato solo parzialmente alla prima apertura. La l'utente può quindi trascinarla o farla scorrere per visualizzarla a schermo intero o chiuderla.
- La funzione lambda
onDismissRequest
controlla cosa succede quando l'utente prova a ignora il riquadro inferiore. In questo caso, viene rimosso solo il foglio.
Risultati
Quando l'utente preme il pulsante per la prima volta, il foglio viene visualizzato parzialmente:
Se l'utente scorre verso l'alto sul foglio, lo schermo riempie tutto: