Tabellenblätter am unteren Rand

Beispiel für eine modale Ansicht am unteren Rand in Material Design 3

Wenn Sie eine Ansicht am unteren Rand implementieren möchten, können Sie die Komposition ModalBottomSheet verwenden.

Sie können den Slot content verwenden, der ein ColumnScope verwendet, um die Composables für den Inhalt des Sheets in einer Spalte anzuordnen:

ModalBottomSheet(onDismissRequest = { /* Executed when the sheet is dismissed */ }) {
    // Sheet content
}

Zustand des Sheets programmatisch steuern

Wenn Sie die Tabelle programmatisch maximieren und minimieren möchten, verwenden Sie SheetState. Mit rememberModalBottomSheetState können Sie eine Instanz von SheetState erstellen, die mit dem Parameter sheetState an ModalBottomSheet übergeben werden muss. SheetState bietet Zugriff auf die Funktionen show und hide sowie auf Eigenschaften, die sich auf den aktuellen Tabellenstatus beziehen. Für diese Sperrfunktionen ist ein CoroutineScope erforderlich, z. B. mit rememberCoroutineScope. Sie können sie als Reaktion auf UI-Ereignisse aufrufen. Achten Sie darauf, dass Sie ModalBottomSheet aus der Komposition entfernen, wenn Sie die Ansicht am unteren Rand ausblenden.

val sheetState = rememberModalBottomSheetState()
val scope = rememberCoroutineScope()
var showBottomSheet by remember { mutableStateOf(false) }
Scaffold(
    floatingActionButton = {
        ExtendedFloatingActionButton(
            text = { Text("Show bottom sheet") },
            icon = { Icon(Icons.Filled.Add, contentDescription = "") },
            onClick = {
                showBottomSheet = true
            }
        )
    }
) { contentPadding ->
    // Screen content

    if (showBottomSheet) {
        ModalBottomSheet(
            onDismissRequest = {
                showBottomSheet = false
            },
            sheetState = sheetState
        ) {
            // Sheet content
            Button(onClick = {
                scope.launch { sheetState.hide() }.invokeOnCompletion {
                    if (!sheetState.isVisible) {
                        showBottomSheet = false
                    }
                }
            }) {
                Text("Hide bottom sheet")
            }
        }
    }
}

Eine modale Ansicht am unteren Rand in Jetpack Compose, in der Inhalte angezeigt werden.