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

Tabellenstatus programmatisch steuern

Verwenden Sie SheetState, um die Tabelle programmatisch zu maximieren und zu minimieren. 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. Für diese Funktionen ist ein CoroutineScope erforderlich, z. B. rememberCoroutineScope. Sie können sie als Reaktion auf UI-Ereignisse aufrufen. 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