在列表中显示嵌套的滚动项
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
您可以在列表中显示嵌套的滚动项,以呈现复杂的布局,例如商品目录、媒体库、新闻动态等。
版本兼容性
此实现要求将项目 minSDK 设置为 API 级别 21 或更高级别。
依赖项
以下代码会生成一个可双向滚动的列表。列表的行水平滚动;整个列表(单列)垂直滚动。
@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
)
}
}
}
}
}
结果
以下视频展示了在垂直滚动列表中嵌套水平列表的最终行为。
包含本指南的集合
本指南属于以下精选快速入门集合,这些集合涵盖了更广泛的 Android 开发目标:
显示列表或网格
借助列表和网格,您的应用可以以视觉上令人愉悦且易于用户使用的形式显示集合。
显示互动组件
了解如何使用可组合函数根据 Material Design 设计系统轻松创建美观的界面组件。
Compose 基础知识(视频合集)
本系列视频介绍了各种 Compose API,可让您快速了解可用 API 以及如何使用它们。
本页面上的内容和代码示例受内容许可部分所述许可的限制。Java 和 OpenJDK 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2025-02-06。
[null,null,["最后更新时间 (UTC):2025-02-06。"],[],[],null,["\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\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\nDependencies\n\nImplement nested horizontal scrolling in vertical list\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/f95ab59fad80aeaf5d6a90bab8a01a126f20f44e/compose/snippets/src/main/java/com/example/compose/snippets/lists/NestedScrollingItem.kt#L29-L46\n```\n\n\u003cbr /\u003e\n\nResults\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\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\nDisplay a list or grid \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\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\nCompose basics (video collection) \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 \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)"]]