Ansicht am unteren Rand

Sie können eine Ansicht am unteren Rand teilweise einblenden und dem Nutzer dann entweder den Vollbildmodus einblenden oder ihn schließen.

Dazu übergeben Sie Ihrem ModalBottomSheet eine Instanz von SheetState, wobei skipPartiallyExpanded auf false gesetzt ist.

Beispiel

In diesem Beispiel wird gezeigt, wie Sie die Eigenschaft sheetState von ModalBottomSheet verwenden können, um das Tabellenblatt zuerst nur teilweise anzuzeigen:

@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 Informationen zum Code

Beachten Sie in diesem Beispiel Folgendes:

  • showBottomSheet steuert, ob in der App die Ansicht am unteren Rand angezeigt wird.
  • sheetState ist eine Instanz von SheetState, wobei skipPartiallyExpanded „false“ ist.
  • ModalBottomSheet verwendet einen Modifikator, mit dem sichergestellt wird, dass er beim vollständigen Maximieren den Bildschirm ausfüllt.
  • ModalBottomSheet verwendet sheetState als Wert für den Parameter sheetState.
    • Daher wird das Tabellenblatt beim ersten Öffnen nur teilweise angezeigt. Der Nutzer kann sie dann ziehen oder wischen, um sie im Vollbildmodus anzuzeigen oder zu schließen.
  • Das Lambda onDismissRequest steuert, was passiert, wenn der Nutzer versucht, die Ansicht am unteren Rand zu schließen. In diesem Fall wird nur das Tabellenblatt entfernt.

Ergebnis

Wenn der Nutzer zum ersten Mal auf die Schaltfläche drückt, wird ein Teil der Tabelle angezeigt:

Eine Ansicht am unteren Rand, die anfangs nur einen Teil des Bildschirms ausfüllt. Der Nutzer kann wischen, um den Bildschirm damit zu füllen, oder ihn schließen.
Abbildung 1. Ansicht am unteren Rand wird teilweise angezeigt.

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

Eine Ansicht am unteren Rand, die der Nutzer maximiert hat, um den Bildschirm zu füllen.
Abbildung 2: Vollbildansicht am unteren Rand

Zusätzliche Ressourcen