[[["わかりやすい","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,["# Lazily load data with lists and Paging\n\n\u003cbr /\u003e\n\nWith lazy loading and Paging, you can support large lists of items---including an\ninfinite list---in your app by loading and displaying data incrementally. This\ntechnique enables you to reduce initial load times and optimize memory usage,\nenhancing performance.\n| **Note:** For optimized performance, use the Paging Library with a lazy list for an infinite list of data.\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(\"androidx.paging:paging-compose:3.3.0-alpha05\")\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 \"androidx.paging:paging-compose:3.3.0-alpha05\"\n \n```\n\n\u003cbr /\u003e\n\nDisplay paged content\n---------------------\n\nWith the Paging library, you can load and display pages of data from a larger\ndataset acquired from local storage or over a network. Use the following code to\ndisplay a paginated list that shows a progress bar to indicate to the user that\nmore data is being fetched:\n\n\n```kotlin\n@Composable\nfun MessageList(\n modifier: Modifier,\n pager: Pager\u003cInt, Message\u003e\n) {\n val lazyPagingItems = pager.flow.collectAsLazyPagingItems()\n\n LazyColumn {\n items(\n lazyPagingItems.itemCount,\n key = lazyPagingItems.itemKey { it.id }\n ) { index -\u003e\n val message = lazyPagingItems[index]\n if (message != null) {\n MessageRow(message)\n } else {\n MessagePlaceholder()\n }\n }\n }\n @Composable\n fun MessagePlaceholder(modifier: Modifier) {\n Box(\n Modifier\n .fillMaxWidth()\n .height(48.dp)\n ) {\n CircularProgressIndicator()\n }\n }\n\n @Composable\n fun MessageRow(\n modifier: Modifier,\n message: Message\n ) {\n Card(modifier = Modifier.padding(8.dp)) {\n Column(\n modifier = Modifier.padding(8.dp),\n verticalArrangement = Arrangement.Center\n ) {\n Text(message.sender)\n Text(message.text)\n }\n }\n }\n}https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/lists/LazyListSnippets.kt#L760-L806\n```\n\n\u003cbr /\u003e\n\n### Key points about the code\n\n- [`LazyColumn`](/reference/kotlin/androidx/compose/foundation/lazy/package-summary#LazyColumn(androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.LazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,kotlin.Function1)): This composable is used to display a large list of items (messages) efficiently. It only renders the items that are visible on the screen, thus saving resources and memory.\n- The [`lazyPagingItems`](/reference/kotlin/androidx/paging/compose/LazyPagingItems) object efficiently manages the loading and presentation of paged data within the `LazyColumn`. It passes `LazyPagingItems` to [`items`](/reference/kotlin/androidx/compose/foundation/lazy/LazyListScope#items(kotlin.Int,kotlin.Function1,kotlin.Function1,kotlin.Function2)) in the `LazyColumn` composable.\n- `MessageRow(message: Text)` is responsible for rendering individual message items, likely displaying the sender and text of the message within a Card.\n- `MessagePlaceholder()` provides a visual placeholder (a loading spinner) while the actual message data is being fetched, enhancing the user experience.\n\nResults\n-------\n\nThe following video shows the resulting behavior of a large list fetching data\nas the user scrolls.\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)"]]