Tabellenblätter am unteren Rand

Wenn Sie eine Ansicht am unteren Rand implementieren möchten, können Sie die zusammensetzbare Funktion 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
}
MaterialLayoutSnippets.kt

Zustand des Tabellenblatts 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 Properties, die sich auf den aktuellen Tabellenstatus beziehen. Diese Funktionen, die die Ausführung anhalten, erfordern einen CoroutineScope, z. B. mit rememberCoroutineScope, und können als Reaktion auf UI-Ereignisse aufgerufen werden. 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")
            }
        }
    }
}
MaterialLayoutSnippets.kt