Sie können ein Bottom Sheet teilweise anzeigen und dem Nutzer dann die Möglichkeit geben, es entweder im Vollbildmodus anzuzeigen oder zu schließen.
Übergeben Sie dazu Ihre ModalBottomSheet
an eine Instanz von SheetState
, wobei skipPartiallyExpanded
auf false
festgelegt ist.
Beispiel
In diesem Beispiel wird gezeigt, wie Sie mit der Eigenschaft sheetState
von ModalBottomSheet
das Blatt anfangs nur teilweise anzeigen lassen:
@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) ) } } } }
Wichtige Punkte zum Code
Beachten Sie in diesem Beispiel Folgendes:
- Mit
showBottomSheet
wird gesteuert, ob das Bottom Sheet in der App angezeigt wird. sheetState
ist eine Instanz vonSheetState
, wobeiskipPartiallyExpanded
„false“ ist.ModalBottomSheet
akzeptiert einen Modifier, der dafür sorgt, dass der Bildschirm im vollständig maximierten Zustand ausgefüllt wird.ModalBottomSheet
verwendetsheetState
als Wert für den ParametersheetState
.- Daher wird das Tabellenblatt beim ersten Öffnen nur teilweise angezeigt. Der Nutzer kann das Overlay dann ziehen oder wischen, um es im Vollbildmodus zu öffnen oder zu schließen.
- Das Lambda
onDismissRequest
steuert, was passiert, wenn der Nutzer versucht, das Bottom Sheet zu schließen. In diesem Fall wird nur das Tabellenblatt entfernt.
Ergebnisse
Wenn der Nutzer zum ersten Mal auf die Schaltfläche drückt, wird das Sheet teilweise angezeigt:

Wenn der Nutzer auf dem Sheet nach oben wischt, füllt es den Bildschirm aus:
