Fogli in basso

Esempio di un riquadro inferiore modale di Material Design 3.

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

Puoi utilizzare lo slot content, che utilizza un ColumnScope per disporre i componibili 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 in modo programmatico, 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 corrente del foglio. Queste funzioni di sospensione richiedono un CoroutineScope — ad esempio, utilizzando rememberCoroutineScope — e puoi chiamarle in risposta agli eventi dell'interfaccia utente. Assicurati di rimuovere ModalBottomSheet dalla composizione quando nascondi il riquadro 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 riquadro inferiore modale in Jetpack Compose che mostra i contenuti.