Plansze dolne

Jeśli chcesz zastosować arkusz dolny, możesz użyć funkcji kompozycyjnej ModalBottomSheet.

Możesz użyć przedziału content, który korzysta z ColumnScope do określania układu elementów kompozycyjnych 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 do właściwości związanych z bieżącym stanem 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