Fogli in basso

Se vuoi implementare un riquadro inferiore, puoi utilizzare il componibile ModalBottomSheet.

Puoi utilizzare l'area content, che utilizza un elemento ColumnScope per il layout dei contenuti componibili in una colonna:

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

L'espansione e la compressione del foglio vengono eseguite in modo programmatico utilizzando SheetState. Puoi utilizzare rememberSheetState per creare un'istanza di SheetState da passare a ModalBottomSheet con il parametro sheetState. SheetState fornisce l'accesso alle funzioni show e hide, nonché alle proprietà relative allo stato del foglio corrente. Queste funzioni di sospensione richiedono un elemento CoroutineScope, ad esempio utilizzando rememberCoroutineScope, e possono essere richiamate in risposta a eventi UI. Assicurati di rimuovere ModalBottomSheet dalla composizione dopo aver nascosto il foglio inferiore.

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