Mostrare elementi nidificati con scorrimento in un elenco
Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
Puoi visualizzare elementi nidificati con scorrimento all'interno di un elenco per presentare layout complessi, come cataloghi di prodotti, gallerie di contenuti multimediali, feed di notizie e altro ancora.
Compatibilità delle versioni
Questa implementazione richiede che il valore minSDK del progetto sia impostato sul livello API 21 o superiore.
Dipendenze
Il seguente codice genera un elenco che scorre in due direzioni. Le righe dell'elenco scorrono orizzontalmente, mentre l'elenco nel suo complesso (una singola colonna) scorre verticalmente.
@Composable
fun NestedScrollingRowsList(urls: List<String>) {
LazyColumn {
items(10) {
LazyRow {
item { Text("Row: $it") }
items(urls.size) { index ->
// AsyncImage provided by Coil.
AsyncImage(
model = urls[index],
modifier = Modifier.size(150.dp),
contentDescription = null
)
}
}
}
}
}
Risultati
Il video seguente mostra i comportamenti risultanti degli elenchi orizzontali nidificati
all'interno di un elenco verticale scorrevole.
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 un elenco o una griglia
Elenchi e griglie consentono alla tua app di mostrare le raccolte in un formato piacevole dal punto di vista visivo e facilmente fruibile dagli utenti.
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.
Nozioni di base sulla composizione (raccolta di video)
Questa serie di video introduce varie API Compose,
mostrando rapidamente cosa è disponibile e come utilizzarle.
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,["# Display nested scrolling items in a list\n\n\u003cbr /\u003e\n\nYou can display nested scrolling items within a list to present complex layouts,\nsuch as product catalogs, media galleries, news feeds, and more.\n\nVersion compatibility\n---------------------\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\n### Dependencies\n\n### Kotlin\n\n\u003cbr /\u003e\n\n```kotlin\n implementation(platform(\"androidx.compose:compose-bom:2025.08.00\"))\n implementation(\"libs.androidx.material3\")\n implementation(\"io.coil-kt:coil-compose:2.6.0\")\n \n```\n\n\u003cbr /\u003e\n\n### Groovy\n\n\u003cbr /\u003e\n\n```groovy\n implementation platform('androidx.compose:compose-bom:2025.08.00')\n implementation \"libs.androidx.material3\"\n implementation \"io.coil-kt:coil-compose:2.6.0\"\n \n```\n\n\u003cbr /\u003e\n\nImplement nested horizontal scrolling in vertical list\n------------------------------------------------------\n\nThe following code produces a list that scrolls two ways. The rows of the list\nscroll horizontally; the list as a whole---a single column---scrolls vertically.\n\n\n```kotlin\n@Composable\nfun NestedScrollingRowsList(urls: List\u003cString\u003e) {\n LazyColumn {\n items(10) {\n LazyRow {\n item { Text(\"Row: $it\") }\n items(urls.size) { index -\u003e\n // AsyncImage provided by Coil.\n AsyncImage(\n model = urls[index],\n modifier = Modifier.size(150.dp),\n contentDescription = null\n )\n }\n }\n }\n }\n}https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/lists/NestedScrollingItem.kt#L29-L46\n```\n\n\u003cbr /\u003e\n\nResults\n-------\n\nThe following video shows the resulting behaviors of nested horizontal lists\nwithin a vertical scrolling list.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nCollections that contain this guide\n-----------------------------------\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\n### Display a list or grid\n\nLists and grids allow your app to display collections in a visually pleasing form that's easy for users to consume. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-a-list-or-grid) \n\n### Display interactive components\n\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\n### Compose basics (video collection)\n\nThis series of videos introduces various Compose APIs, quickly showing you what's available and how to use them. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/compose-basics) \n\nHave questions or feedback\n--------------------------\n\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)"]]
