Fogli in basso

Se vuoi implementare un riquadro in basso, puoi utilizzare il composable ModalBottomSheet.

Puoi utilizzare lo slot content, che utilizza un ColumnScope per impostare il layout dei composabili 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 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 CoroutineScope, ad esempio utilizzando rememberCoroutineScope, e puoi chiamarle in risposta agli eventi della 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