목록에 중첩된 스크롤 항목 표시
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
목록 내에 중첩된 스크롤 항목을 표시하여 제품 카탈로그, 미디어 갤러리, 뉴스 피드와 같은 복잡한 레이아웃을 표시할 수 있습니다.
버전 호환성
이 구현을 사용하려면 프로젝트 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 디자인 시스템을 기반으로 멋진 UI 구성요소를 쉽게 만드는 방법을 알아보세요.
Compose 기초 (동영상 모음)
이 동영상 시리즈에서는 다양한 Compose API를 소개하고 사용 가능한 API와 사용 방법을 빠르게 보여줍니다.
이 페이지에 나와 있는 콘텐츠와 코드 샘플에는 콘텐츠 라이선스에서 설명하는 라이선스가 적용됩니다. 자바 및 OpenJDK는 Oracle 및 Oracle 계열사의 상표 또는 등록 상표입니다.
최종 업데이트: 2025-02-06(UTC)
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2025-02-06(UTC)"],[],[],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)"]]