Fogli in basso

Un esempio di foglio modale inferiore di Material Design 3.

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

Puoi utilizzare lo slot content, che utilizza un ColumnScope per disporre i composable dei contenuti del foglio in una colonna:

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

Controllare lo stato del foglio in modo programmatico

Per espandere e comprimere il foglio a livello di programmazione, utilizza SheetState. Puoi utilizzare rememberModalBottomSheetState per creare un'istanza di SheetState che deve essere passata a ModalBottomSheet con il parametro sheetState. SheetState fornisce l'accesso alle funzioni show e hide, nonché alle proprietà relative allo stato attuale del foglio. Queste funzioni di sospensione richiedono un CoroutineScope, ad esempio l'utilizzo di rememberCoroutineScope e puoi chiamarle in risposta agli eventi dell'interfaccia utente. Assicurati di rimuovere ModalBottomSheet dalla composizione quando nascondi 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

Un foglio modale in Jetpack Compose che mostra i contenuti.