Tabellenblätter am unteren Rand

Beispiel für ein modales Bottom Sheet in Material Design 3.

Wenn Sie ein Bottom Sheet implementieren möchten, können Sie die Composable ModalBottomSheet verwenden.

Sie können den content-Slot verwenden, der ein ColumnScope verwendet, um Composables für Tabellenblattinhalte in einer Spalte anzuordnen:

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

Tabellenblattstatus programmatisch steuern

Verwenden Sie SheetState, um das Blatt programmatisch zu maximieren und zu minimieren. 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 Tabellenblattstatus beziehen. Für diese unterbrechenden 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 das Bottom Sheet ausgeblendet wird.

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

Ein modales Bottom Sheet in Jetpack Compose mit Inhalten.