Plansze dolne

Jeśli chcesz wdrożyć dolną kartę, 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

Sterowanie stanem arkusza za pomocą kodu

Aby rozwinąć lub zwinąć arkusz programowo, użyj elementu 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ą funkcji CoroutineScope, na przykład rememberCoroutineScope, i można je wywołać 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