Tabellenblätter am unteren Rand

Wenn Sie ein Bottom Sheet implementieren möchten, können Sie das ModalBottomSheet-Komposit verwenden.

Sie können den content-Slot verwenden, bei dem mithilfe eines ColumnScope Tabelleninhalte in einer Spalte angeordnet werden:

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

Das Tabellenblatt wird mit SheetState programmatisch maximiert und minimiert. Mit rememberSheetState können Sie eine Instanz von SheetState erstellen, die mit dem Parameter sheetState an ModalBottomSheet übergeben werden soll. SheetState bietet Zugriff auf die Funktionen show und hide sowie auf Eigenschaften, die sich auf den aktuellen Tabellenstatus beziehen. Diese Aussetzungsfunktionen erfordern eine CoroutineScope – z. B. mithilfe von rememberCoroutineScope – und können als Reaktion auf UI-Ereignisse aufgerufen werden. Entfernen Sie das ModalBottomSheet aus der Komposition, wenn Sie das untere Blatt 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")
            }
        }
    }
}
MaterialLayoutSnippets.kt