تحميل البيانات بشكلٍ بطيء باستخدام القوائم وميزة "التنقّل في الصفحة"
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
باستخدام ميزة "التحميل البطيء" وميزة "التنقّل في الصفحات"، يمكنك عرض قوائم كبيرة من العناصر، بما في ذلك
قائمة لا نهائية، في تطبيقك من خلال تحميل البيانات وعرضها بشكل تدريجي. تتيح لك هذه الأسلوب تقليل أوقات التحميل الأولية وتحسين استخدام الذاكرة، وبالتالي تحسين الأداء.
توافق الإصدار
يتطلّب هذا التنفيذ ضبط الحد الأدنى من إصدار حزمة SDK لمشروعك على المستوى 21 من واجهة برمجة التطبيقات أو
إصدار أحدث.
التبعيات
عرض محتوى مُقسَّم إلى صفحات
باستخدام مكتبة Paging، يمكنك تحميل صفحات البيانات وعرضها من مجموعة بيانات أكبر
تم الحصول عليها من مساحة التخزين المحلية أو عبر شبكة. استخدِم الرمز البرمجي التالي لمحاولة
عرض قائمة مفصّلة تعرض شريط تقدّم للإشارة إلى المستخدم بأنّه تتم محاولة retrieving more data:
LazyColumn: يتم استخدام هذا المكوّن القابل للتجميع لعرض قائمة كبيرة من العناصر
(الرسائل) بكفاءة. ولا يعرض سوى العناصر الظاهرة على
الشاشة، ما يوفر الموارد والذاكرة.
يدير عنصر lazyPagingItems بفعالية تحميل
البيانات المفصّلة ضمن LazyColumn وعرضها. ويُرسِل LazyPagingItems إلى items في العنصر القابل للتجميع
LazyColumn.
MessageRow(message: Text) مسؤول عن عرض
عناصر الرسائل الفردية، ومن المحتمل أن يعرض المُرسِل ونص الرسالة ضمن بطاقة.
MessagePlaceholder() يوفّر عنصر نائبًا مرئيًا (مؤشر سريان العمل) أثناء
جلب بيانات الرسالة الفعلية، ما يُحسِّن تجربة المستخدم.
النتائج
يعرض الفيديو التالي السلوك الناتج عن قائمة كبيرة تُجلب البيانات
أثناء تنقّل المستخدم.
المجموعات التي تتضمّن هذا الدليل
هذا الدليل هو جزء من مجموعات الأدلة السريعة المنظَّمة التي تتناول
أهداف تطوير Android الأوسع نطاقًا:
عرض قائمة أو شبكة
تسمح القوائم والشبكات لتطبيقك بعرض المجموعات في شكلٍ
ممتع من الناحية المرئية ويسهل على المستخدمين الاطّلاع عليه.
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-02-06 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","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 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],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)"]]