Plansze dolne

Jeśli chcesz wdrożyć schowawę dolną, możesz użyć komponentu ModalBottomSheet.

Możesz użyć slotu content, który wykorzystuje element komponowalny ColumnScope do rozmieszczania elementów treści arkusza w kolumnie:

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

Rozwijanie i zwijanie arkusza odbywa się automatycznie za pomocą funkcji SheetState. Możesz użyć funkcji rememberSheetState, aby utworzyć instancję typu SheetState, która powinna zostać przekazana do funkcji ModalBottomSheet za pomocą parametru sheetState. SheetState zapewnia dostęp do funkcji show i hide, a także właściwości związanych ze stanem bieżącego arkusza. Te funkcje zawieszania wymagają CoroutineScope (np. za pomocą funkcji rememberCoroutineScope) i mogą być wywoływane w odpowiedzi na zdarzenia interfejsu użytkownika. Po ukryciu dolnego arkusza usuń z kompozycji element ModalBottomSheet.

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