Creare un riquadro inferiore
Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
Un riquadro in basso mostra i contenuti secondari, ancorati alla parte inferiore dello schermo.
Compatibilità delle versioni
Questa implementazione richiede che il valore minSDK del progetto sia impostato sul livello API 21 o superiore.
Dipendenze
Implementare un riquadro inferiore
Per implementare un riquadro in basso, utilizza il composable ModalBottomSheet:
Espandi e comprimi il foglio
Per espandere e comprimere il foglio, utilizza SheetState:
Punti chiave
- Utilizza lo slot
content, che utilizza un ColumnScope per disporre i composabili dei contenuti del foglio in una colonna.
- Utilizza
rememberSheetState per creare un'istanza di SheetState da passare a ModalBottomSheet con il parametro sheetState.
SheetState fornisce accesso alle funzioni show e hide e alle proprietà relative allo stato del foglio corrente. Queste funzioni richiedono un CoroutineScope, ad esempio rememberCoroutineScope, e possono essere chiamate in risposta agli eventi dell'interfaccia utente.
Assicurati di rimuovere ModalBottomSheet dalla composizione quando nascondi il foglio inferiore.
Risultati
Figura 1. Un foglio inferiore standard (a sinistra) e un foglio inferiore modale (a destra).
Raccolte che contengono questa guida
Questa guida fa parte di queste raccolte di guide rapide selezionate che coprono obiettivi di sviluppo Android più ampi:
Mostrare componenti interattivi
Scopri come le funzioni composable possono aiutarti a creare facilmente magnifici componenti dell'interfaccia utente basati sul sistema di progettazione Material Design.
I campioni di contenuti e codice in questa pagina sono soggetti alle licenze descritte nella Licenza per i contenuti. Java e OpenJDK sono marchi o marchi registrati di Oracle e/o delle sue società consociate.
Ultimo aggiornamento 2025-02-06 UTC.
[[["Facile da capire","easyToUnderstand","thumb-up"],["Il problema è stato risolto","solvedMyProblem","thumb-up"],["Altra","otherUp","thumb-up"]],[["Mancano le informazioni di cui ho bisogno","missingTheInformationINeed","thumb-down"],["Troppo complicato/troppi passaggi","tooComplicatedTooManySteps","thumb-down"],["Obsoleti","outOfDate","thumb-down"],["Problema di traduzione","translationIssue","thumb-down"],["Problema relativo a esempi/codice","samplesCodeIssue","thumb-down"],["Altra","otherDown","thumb-down"]],["Ultimo aggiornamento 2025-02-06 UTC."],[],[],null,["\u003cbr /\u003e\n\nA bottom sheet shows secondary content, anchored to the bottom of the screen.\n\nVersion compatibility\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\nDependencies\n\nImplement a bottom sheet\n\nTo implement a [bottom sheet](https://m3.material.io/components/bottom-sheets/overview), use the [`ModalBottomSheet`](/reference/kotlin/androidx/compose/material3/package-summary#ModalBottomSheet(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.material3.SheetState,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,kotlin.Function0,kotlin.Function0,androidx.compose.material3.ModalBottomSheetProperties,kotlin.Function1))\ncomposable:\n\nExpand and collapse the sheet\n\nTo expand and collapse the sheet, use [`SheetState`](/reference/kotlin/androidx/compose/material3/SheetState):\n\nKey points\n\n- Use the `content` slot, which uses a [`ColumnScope`](/reference/kotlin/androidx/compose/foundation/layout/ColumnScope) to lay out sheet content composables in a column.\n- Use [`rememberSheetState`](/reference/kotlin/androidx/compose/material3/package-summary#rememberSheetState(kotlin.Boolean,kotlin.Function1)) to create an instance of `SheetState` that you pass to `ModalBottomSheet` with the `sheetState` parameter.\n- `SheetState` provides access to the [`show`](/reference/kotlin/androidx/compose/material3/SheetState#show()) and [`hide`](/reference/kotlin/androidx/compose/material3/SheetState#hide()) functions\n and to properties related to the current sheet state. These functions\n require a `CoroutineScope` --- for example, [`rememberCoroutineScope`](/reference/kotlin/androidx/compose/runtime/package-summary#remembercoroutinescope) ---\n and can be called in response to UI events.\n\n- Make sure to remove the `ModalBottomSheet` from composition when you hide\n the bottom sheet.\n\nResults\n\n\n**Figure 1.** A standard bottom sheet (left) and a modal bottom sheet (right).\n\n\u003cbr /\u003e\n\nCollections that contain this guide\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\nDisplay interactive components \nLearn how composable functions can enable you to easily create beautiful UI components based on the Material Design design system. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-interactive-components) \n\nHave questions or feedback \nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]
