Ansicht am unteren Rand

Sie können eine Ansicht am unteren Rand teilweise einblenden und den Nutzer dann entscheiden lassen, ob er sie im Vollbildmodus anzeigen oder schließen möchte.

Übergeben Sie dazu an ModalBottomSheet eine Instanz von SheetState, wobei skipPartiallyExpanded auf false festgelegt ist.

Beispiel

In diesem Beispiel wird gezeigt, wie Sie mit der Property sheetState von ModalBottomSheet die Ansicht zuerst nur teilweise anzeigen können:

@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:

  • showBottomSheet steuert, ob die App die Ansicht am unteren Rand anzeigt.
  • sheetState ist eine Instanz von SheetState, wobei skipPartiallyExpanded „false“ ist.
  • ModalBottomSheet verwendet einen Modifikator, 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 sie dann per Drag-and-drop oder Wischgeste im Vollbildmodus anzeigen oder schließen.
  • Der Lambda-Ausdruck onDismissRequest steuert, was passiert, wenn der Nutzer versucht, die Ansicht am unteren Rand zu schließen. In diesem Fall wird nur das Tabellenblatt entfernt.

Ergebnisse

Wenn der Nutzer die Taste zum ersten Mal drückt, wird das Sheet teilweise angezeigt:

Eine Ansicht am unteren Rand, die anfangs nur einen Teil des Bildschirms ausfüllt. Der Nutzer kann wischen, um die Anzeige im Vollbildmodus zu sehen oder sie zu schließen.
Abbildung 1. Teilweise angezeigte Ansicht am unteren Rand.

Wenn der Nutzer auf dem Sheet nach oben wischt, wird es im Vollbildmodus angezeigt:

Eine Ansicht am unteren Rand, die der Nutzer maximiert hat, um den Bildschirm auszufüllen.
Abbildung 2: Ansicht am unteren Rand im Vollbildmodus.

Zusätzliche Ressourcen