Ansicht am unteren Rand

Sie können eine Ansicht am unteren Rand teilweise einblenden und dem Nutzer dann entweder die Möglichkeit geben, Vollbild anzeigen oder sie schließen.

Übergeben Sie dazu Ihrem ModalBottomSheet eine Instanz von SheetState. wobei skipPartiallyExpanded auf false gesetzt ist.

Beispiel

Dieses Beispiel zeigt, wie Sie das Attribut sheetState von ModalBottomSheet, 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 ist falsch.
• ModalBottomSheet nimmt einen Modifizierer an, mit dem sichergestellt wird, dass er den Bildschirm ausfüllt wenn sie vollständig maximiert ist.
• ModalBottomSheet verwendet sheetState als Wert für sheetState .
  • Daher wird das Tabellenblatt beim ersten Öffnen nur teilweise angezeigt. Die und ziehen oder wischen, um den Vollbildmodus zu starten oder ihn zu schließen.
• Das Lambda onDismissRequest steuert, was passiert, wenn der Nutzer versucht, schließen Sie die Ansicht am unteren Rand. In diesem Fall wird nur das Tabellenblatt entfernt.

Ergebnisse

Wenn die Nutzenden zum ersten Mal auf die Schaltfläche klicken, wird ein Teil der Tabelle angezeigt:

<ph type="x-smartling-placeholder">

</ph>

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

<ph type="x-smartling-placeholder">

</ph>

Weitere Informationen

• Tabellenblätter unten