Ansicht am unteren Rand

Sie können ein Unterlegblatt teilweise anzeigen und den Nutzer dann entscheiden lassen, ob es den Vollbildmodus aktivieren oder schließen möchte.

Dazu übergeben Sie ModalBottomSheet eine Instanz von SheetState, bei der skipPartiallyExpanded auf false festgelegt ist.

Verwendungsbeispiele

In diesem Beispiel wird gezeigt, wie Sie mit der Eigenschaft sheetState von ModalBottomSheet das Tabellenblatt 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 festgelegt, ob das untere Steuerfeld in der App angezeigt wird.
  • sheetState ist eine Instanz von SheetState, bei der skipPartiallyExpanded falsch ist.
  • ModalBottomSheet nimmt einen Modifikator an, der dafür sorgt, dass das Symbol im Vollbildmodus den gesamten Bildschirm einnimmt.
  • ModalBottomSheet nimmt sheetState als Wert für den Parameter sheetState an.
    • Daher wird das Tabellenblatt beim ersten Öffnen nur teilweise angezeigt. Der Nutzer kann sie dann ziehen oder wischen, um sie im Vollbildmodus zu öffnen oder zu schließen.
  • Mit dem Lambda-Ausdruck onDismissRequest wird festgelegt, was passiert, wenn der Nutzer versucht, den unteren Infobereich zu schließen. In diesem Fall wird nur das Tabellenblatt entfernt.

Ergebnisse

Wenn der Nutzer die Schaltfläche zum ersten Mal drückt, wird das Tabellenblatt teilweise angezeigt:

Ein Unterbrechungsfenster, das anfangs nur einen Teil des Bildschirms ausfüllt. Der Nutzer kann wischen, um das Bild auf dem gesamten Bildschirm zu sehen, oder es schließen.
Abbildung 1: Teilweise angezeigte Ansicht am unteren Rand.

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

Ein unteres Steuerfeld, das der Nutzer maximiert hat, um den gesamten Bildschirm auszufüllen.
Abbildung 2: Vollbild-Unterbrechung.

Weitere Informationen