معارض LazyVerticalGrid
رتّب العناصر في شبكة قابلة للتمرير
معارض LazyVerticalGrid درس مجاني في Jetpack Compose Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Jetpack Compose Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Jetpack Compose Academy 4 دروس في المجموع.
الشبكات في Compose
عندما تحتاج شاشة مليئة بالصور إلى صفوف وأعمدة مرتبة، استخدموا LazyVerticalGrid. فهي تمرر المحتوى عموديًا ولا تنشئ إلا الخلايا التي يمكنكم رؤيتها. 🖼️
لماذا Lazy؟
مثل LazyColumn، تتجاوز شبكة lazy العناصر الموجودة خارج الشاشة. وتظل معرضًا يضم ألف صورة سلسًا، لأن Compose ينشئ الخلايا عند الطلب لا كلها دفعة واحدة.
الإعداد الأساسي
تحددون لـLazyVerticalGrid عدد الأعمدة وتزوّدونها بالعناصر. ويصبح كل عنصر خلية واحدة، بينما يوزعها Compose من اليسار إلى اليمين ثم إلى الأسفل.
LazyVerticalGrid(columns = GridCells.Fixed(2)) {
items(photos) { photo ->
PhotoCell(photo)
}
}GridCells.Fixed
استخدموا GridCells.Fixed(n) عندما تريدون عددًا دقيقًا من الأعمدة، مثل شبكة أيقونات مرتبة من ثلاثة أعمدة لا تتغير.
columns = GridCells.Fixed(3)المسافات بين الخلايا
أضيفوا مساحة مريحة باستخدام معاملات Arrangement. فهي تتحكم بشكل منفصل في الفجوة بين الصفوف والفجوة بين الأعمدة.
LazyVerticalGrid(
columns = GridCells.Fixed(2),
verticalArrangement = Arrangement.spacedBy(8.dp),
horizontalArrangement = Arrangement.spacedBy(8.dp)
) { }الحشو حول الشبكة
استخدموا contentPadding لإبعاد الشبكة بأكملها عن حواف الشاشة. فهذا يمنع الخلايا الأولى والأخيرة من الالتصاق بالحدود.
contentPadding = PaddingValues(16.dp)العناصر من قائمة
يأخذ مُنشئ items قائمة بياناتكم وlambda للخلية. ويقابل كل عنصر في القائمة خلية منشأة واحدة بالضبط.
items(galleryPhotos) { photo ->
AsyncImage(model = photo.url, contentDescription = null)
}خلية خاصة واحدة
هل تحتاجون إلى ترويسة أو خلية تُضاف مرة واحدة؟ استخدموا item بصيغة المفرد للمحتوى الذي لا ينبغي تكراره على امتداد قائمتكم.
item { GalleryTitle() }
items(photos) { PhotoCell(it) }الامتداد عبر الأعمدة
يمكن للخلية أن تمتد عبر الصف بأكمله باستخدام span. وهذا مناسب تمامًا لعنوان قسم موضوع فوق صوره.
item(span = { GridItemSpan(maxLineSpan) }) {
SectionHeader("Recent")
}حافظوا على الخلايا مربعة
تبدو معارض الصور أفضل عندما تكون الخلايا مربعة. طبّقوا aspectRatio(1f) على كل خلية كي يتناسب ارتفاعها مع عرضها.
Box(Modifier.aspectRatio(1f)) { PhotoCell(photo) }الشبكة مقابل القائمة
اختاروا grid عندما تكون العناصر مرئية ومتساوية الأهمية، مثل الصور المصغرة. واختاروا القائمة عندما يكون كل صف سجلًا مميزًا بعرض كامل.
تحقق سريع
سؤال سريع حول عدد الأعمدة.
مراجعة: معارض الشبكات
تعرّفتم إلى LazyVerticalGrid: خلايا كسولة، وعدد أعمدة، ومسافات، وحشو، وامتدادات. وهي خياركم الأساسي لمعارض الصور القابلة للتمرير. ✨
تعلم Kotlin مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 30
- الدروس
- 120
الأسئلة الشائعة
هل درس «معارض LazyVerticalGrid» مجاني؟
نعم — نص درس «معارض LazyVerticalGrid» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Jetpack Compose Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Jetpack Compose Academy 4 دروس في المجموع.
ماذا ستتعلم في «معارض LazyVerticalGrid»؟
رتّب العناصر في شبكة قابلة للتمرير تتمرن على Jetpack Compose Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Jetpack Compose Academy؟
لا تُشترط خبرة سابقة. Jetpack Compose Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «معارض LazyVerticalGrid»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Jetpack Compose Academy هذا؟
نعم. كل درس في Jetpack Compose Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- معارض LazyVerticalGrid
- LazyRow للتنقل الدائري
- خلايا الشبكة المتكيفة مقابل الثابتة
- حالة التمرير والتمرير البرمجي