تحميل البيانات بشكلٍ بطيء باستخدام القوائم وميزة "التنقّل في الصفحة"

باستخدام ميزتَي "التحميل الكسول" و"تقسيم الصفحات"، يمكنك إتاحة قوائم كبيرة من العناصر، بما في ذلك قائمة لا نهائية، في تطبيقك من خلال تحميل البيانات وعرضها بشكل تدريجي. تتيح لك هذه التقنية تقليل أوقات التحميل الأولية وتحسين استخدام الذاكرة، مما يعزز الأداء.

النتائج

يعرض الفيديو التالي السلوك الناتج عن قائمة كبيرة تجلب البيانات أثناء انتقال المستخدم للأسفل.

التوافق مع الإصدارات

يتطلّب هذا التنفيذ ضبط minSDK لمشروعك على المستوى 21 من واجهة برمجة التطبيقات أو مستوى أعلى.

الطلبات التابعة

عرض المحتوى على صفحات

باستخدام مكتبة Paging، يمكنك تحميل وعرض صفحات من البيانات من مجموعة بيانات أكبر تم الحصول عليها من مساحة التخزين المحلية أو عبر شبكة. استخدِم الرمز التالي لعرض قائمة مقسّمة إلى صفحات تعرض شريط تقدّم للإشارة إلى المستخدم بأنّه يتم جلب المزيد من البيانات:

@Composable
fun MessageList(
    modifier: Modifier,
    pager: Pager<Int, Message>
) {
    val lazyPagingItems = pager.flow.collectAsLazyPagingItems()

    LazyColumn {
        items(
            lazyPagingItems.itemCount,
            key = lazyPagingItems.itemKey { it.id }
        ) { index ->
            val message = lazyPagingItems[index]
            if (message != null) {
                MessageRow(message)
            } else {
                MessagePlaceholder()
            }
        }
    }
    @Composable
    fun MessagePlaceholder(modifier: Modifier) {
        Box(
            Modifier
                .fillMaxWidth()
                .height(48.dp)
        ) {
            CircularProgressIndicator()
        }
    }

    @Composable
    fun MessageRow(
        modifier: Modifier,
        message: Message
    ) {
        Card(modifier = Modifier.padding(8.dp)) {
            Column(
                modifier = Modifier.padding(8.dp),
                verticalArrangement = Arrangement.Center
            ) {
                Text(message.sender)
                Text(message.text)
            }
        }
    }
}

نقاط رئيسية حول الرمز

  • ‫LazyColumn: تُستخدَم هذه الدالة المركّبة لعرض قائمة كبيرة من العناصر (الرسائل) بكفاءة. فهي تعرض فقط العناصر المرئية على الشاشة، وبالتالي توفر الموارد والذاكرة.
  • يدير عنصر lazyPagingItems بفعالية تحميل وعرض البيانات المقسّمة إلى صفحات ضمن LazyColumn. وتمرّر LazyPagingItems إلى items في الدالة المركّبة LazyColumn.
  • ‫MessageRow(message: Text) مسؤول عن عرض عناصر الرسائل الفردية، ومن المرجّح أن يعرض المُرسِل ونص الرسالة ضمن بطاقة.
  • يوفّر MessagePlaceholder() عنصرًا نائبًا مرئيًا (مؤشر تحميل) أثناء جلب بيانات الرسالة الفعلية، ما يحسّن تجربة المستخدم.

المجموعات التي تحتوي على هذا الدليل

هذا الدليل هو جزء من مجموعات "الأدلة السريعة" المنظَّمة التي تغطي أهدافًا أوسع لتطوير تطبيقات Android:

تتيح القوائم والشبكات لتطبيقك عرض المجموعات بشكل جذاب بصريًا ويسهل على المستخدمين استخدامه.
مجموعة الأدلة السريعة
تعرَّف على كيفية استخدام الدوال المركّبة لإنشاء مكوّنات واجهة مستخدم رائعة بسهولة استنادًا إلى نظام التصميم المتعدد الأبعاد.
مجموعة الأدلة السريعة
تقدّم هذه السلسلة من الفيديوهات واجهات برمجة تطبيقات Compose المختلفة، وتعرض لك بسرعة الواجهات المتاحة وكيفية استخدامها.
مجموعة الأدلة السريعة

هل لديك أي أسئلة أو ملاحظات؟

انتقِل إلى صفحة الأسئلة الشائعة واطّلِع على الأدلة السريعة أو تواصَل معنا وأطلِعنا على رأيك.
الانتقال إلى الأسئلة الشائعة تقديم ملاحظات