Fogli in basso

Esempio di un foglio modale inferiore di Material Design 3.

Se vuoi implementare un foglio inferiore, puoi utilizzare il composable 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 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 una 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.