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-Layout für die Composables für Tabellenblattinhalte in einer Spalte verwendet:

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 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 Blatt am unteren Rand in Jetpack Compose, das Inhalte anzeigt.