Ansicht am unteren Rand

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 gesetzt 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)
                )
            }
        }
    }
}
BottomSheet.kt

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 von SheetState, wobei skipPartiallyExpanded „false“ ist.
• ModalBottomSheet akzeptiert einen Modifier, der dafür sorgt, dass der Bildschirm im vollständig maximierten Zustand ausgefüllt wird.
• ModalBottomSheet verwendet sheetState als Wert für den Parameter sheetState.
  • 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:

Zusätzliche Ressourcen

• Bottom Sheets