Se vuoi implementare un foglio inferiore, puoi utilizzare l'elemento componibile ModalBottomSheet
.
Puoi utilizzare l'area content
, che usa un elemento ColumnScope
per posizionare i contenuti componibili del foglio in una colonna:
ModalBottomSheet(onDismissRequest = { /* Executed when the sheet is dismissed */ }) { // Sheet content }
L'espansione e la compressione del foglio in modo programmatico vengono eseguite utilizzando SheetState
. Puoi utilizzare rememberSheetState
per creare un'istanza di SheetState
da passare a ModalBottomSheet
con il parametro sheetState
. SheetState
consente di accedere alle funzioni show
e
hide
, nonché a proprietà correlate allo stato
attuale del foglio. Queste funzioni di sospensione richiedono un CoroutineScope
, ad esempio
l'uso di rememberCoroutineScope
, e possono essere chiamate 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") } } } }