Vous pouvez afficher partiellement une bottom sheet, puis laisser l'utilisateur la créer plein écran ou l'ignorer.
Pour ce faire, transmettez à ModalBottomSheet
une instance de SheetState
avec skipPartiallyExpanded
défini sur false
.
Exemple
Cet exemple montre comment utiliser la propriété sheetState
de
ModalBottomSheet
pour n'afficher que partiellement la feuille au début:
@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) ) } } } }
Points clés concernant le code
Dans cet exemple, notez les points suivants:
showBottomSheet
détermine si l'application affiche ou non la bottom sheet.sheetState
est une instance deSheetState
oùskipPartiallyExpanded
est faux.ModalBottomSheet
utilise un modificateur qui garantit qu'il remplit l'écran lorsqu'il est entièrement développé.ModalBottomSheet
utilisesheetState
comme valeur pour sonsheetState
. .- Par conséquent, la feuille ne s'affiche que partiellement lors de la première ouverture. La l'utilisateur peut alors le faire glisser ou le balayer pour l'afficher en plein écran ou le fermer.
- Le lambda
onDismissRequest
contrôle ce qui se passe lorsque l'utilisateur tente de fermer la bottom sheet. Dans ce cas, seule la feuille est supprimée.
Résultats
Lorsque l'utilisateur appuie pour la première fois sur le bouton, la feuille s'affiche partiellement:
Si l'utilisateur balaie la feuille vers le haut, elle remplit l'écran: