Vous pouvez afficher partiellement une feuille inférieure, puis laisser l'utilisateur la mettre en plein écran ou la fermer.
Pour ce faire, transmettez à votre ModalBottomSheet
une instance de SheetState
avec skipPartiallyExpanded
défini sur false
.
Exemple
Cet exemple montre comment utiliser la propriété sheetState
de ModalBottomSheet
pour afficher la feuille uniquement partiellement 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
contrôle si l'application affiche la feuille inférieure.sheetState
est une instance deSheetState
oùskipPartiallyExpanded
est défini sur "false".ModalBottomSheet
accepte un modificateur qui garantit qu'il remplit l'écran lorsqu'il est entièrement développé.ModalBottomSheet
utilisesheetState
comme valeur pour son paramètresheetState
.- Par conséquent, la feuille ne s'affiche que partiellement lors de sa première ouverture. L'utilisateur peut ensuite le faire glisser ou le balayer pour le mettre en plein écran ou le fermer.
- Le lambda
onDismissRequest
contrôle ce qui se passe lorsque l'utilisateur tente de fermer la feuille inférieure. Dans ce cas, seule la feuille est supprimée.
Résultats
Lorsque l'utilisateur appuie sur le bouton pour la première fois, la feuille s'affiche partiellement :

Si l'utilisateur balaie la feuille vers le haut, elle remplit l'écran :
