Android Academy · درس

القوائم باستخدام LazyColumn

اعرض القوائم القابلة للتمرير بكفاءة

القوائم باستخدام LazyColumn درس مجاني في Android Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Android Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Android Academy 4 دروس في المجموع.

لماذا لا نستخدم Column فحسب؟

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

إليك LazyColumn

إن LazyColumn قائمة عمودية قابلة للتمرير، ولا تنشئ إلا العناصر الموجودة حاليًا على الشاشة — مثل RecyclerView القديم، ولكن بطريقة أبسط بكثير.

LazyColumn {
    items(messages) { msg ->
        Text(text = msg)
    }
}

دالة items()

داخل lambda الخاصة بـ LazyColumn، تستدعي items(list) وتزوّدها بـ composable لكل عنصر. ويستدعيها Compose بشكل كسول أثناء تمرير المستخدم.

LazyColumn {
    items(users) { user ->
        Text(text = user.name)
    }
}

ليست حلقة عادية

لا تستخدم حلقة for عادية داخل LazyColumn — فهذا يلغي مبدأ الإنشاء الكسول. استخدم دائمًا items() (أو itemsIndexed()) حتى يتمكن Compose من إنشاء العناصر عند الطلب.

عنصر رأس واحد

استخدم item { } (بصيغة المفرد) لإضافة عنصر ثابت واحد، مثل رأس، قبل العناصر التي تنشئها الحلقة.

LazyColumn {
    item { Text("Header") }
    items(data) { Text(it) }
}

itemsIndexed

عندما تحتاج إلى الموضع، استخدم itemsIndexed للحصول على الفهرس والعنصر معًا.

LazyColumn {
    itemsIndexed(data) { index, value ->
        Text(text = "$index: $value")
    }
}

مفاتيح الاستقرار

وفّر key ثابتًا لكل عنصر حتى يتمكن Compose من تتبع العناصر بشكل صحيح عند تغيّر القائمة، مما يحسّن الأداء والحركات.

items(users, key = { it.id }) { user ->
    Text(user.name)
}

تباعد العناصر

يقبل LazyColumn كلًا من verticalArrangement وcontentPadding لتوزيع العناصر وإضافة حشو إلى حواف القائمة.

LazyColumn(
    verticalArrangement = Arrangement.spacedBy(8.dp),
    contentPadding = PaddingValues(16.dp)
) {
    items(data) { Text(it) }
}

LazyRow

يتوفر أيضًا LazyRow للقوائم الأفقية القابلة للتمرير — واجهة API نفسها، لكن باتجاه مختلف. وهو مناسب جدًا لصفوف البطاقات المتحركة.

LazyRow {
    items(images) { img ->
        Image(painter = img, contentDescription = null)
    }
}

التمرير المضمّن

لا تضف معدِّل تمرير إلى LazyColumn — فهي قابلة للتمرير تلقائيًا. ستتعارض إضافة verticalScroll معها وتتسبب في تعطل التطبيق. تتولى القوائم الكسولة التمرير بنفسها.

تجميع العناصر معًا

قائمة عناصر تتضمن رأسًا ومفاتيح وتباعدًا.

@Composable
fun MessageList(messages: List<Message>) {
    LazyColumn(
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        item { Text("Inbox") }
        items(messages, key = { it.id }) { msg ->
            Text(text = msg.text)
        }
    }
}

تحقق سريع

ما الميزة الأساسية لـ LazyColumn مقارنةً بـ Column قابلة للتمرير؟

مراجعة

LazyColumn:

تنشئ العناصر الظاهرة فقط — وهي فعّالة للقوائم الطويلة.
استخدم items() / itemsIndexed() بدلًا من حلقة for.
أضف key لتحقيق الاستقرار، واستخدم item { } لرؤوس القوائم.
تتولى التمرير تلقائيًا — ولا تحتاج إلى معدِّل تمرير. أما LazyRow فهي النسخة الأفقية.

الأسئلة الشائعة

هل درس «القوائم باستخدام LazyColumn» مجاني؟

نعم — نص درس «القوائم باستخدام LazyColumn» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Android Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Android Academy 4 دروس في المجموع.

ماذا ستتعلم في «القوائم باستخدام LazyColumn»؟

اعرض القوائم القابلة للتمرير بكفاءة تتمرن على Android Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Android Academy؟

لا تُشترط خبرة سابقة. Android Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «القوائم باستخدام LazyColumn»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Android Academy هذا؟

نعم. كل درس في Android Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Android Academy