إنشاء شبكة قابلة للتنقّل

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

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

يتطلّب هذا التنفيذ ضبط الحد الأدنى من إصدار حزمة SDK لمشروعك على المستوى 21 من واجهة برمجة التطبيقات أو إصدار أحدث.

التبعيات

تحديد اتجاه الشبكة

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

إنشاء شبكة قابلة للتنقّل

تنشئ التعليمة البرمجية التالية شبكة لف أفقي يتضمّن ثلاثة أعمدة:

@Composable
fun ScrollingGrid() {
    val itemsList = (0..15).toList()

    val itemModifier = Modifier
        .border(1.dp, Color.Blue)
        .width(80.dp)
        .wrapContentSize()

    LazyHorizontalGrid(
        rows = GridCells.Fixed(3),
        horizontalArrangement = Arrangement.spacedBy(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        items(itemsList) {
            Text("Item is $it", itemModifier)
        }

        item {
            Text("Single item", itemModifier)
        }
    }
}
LazyListSnippets.kt

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

  • يحدِّد العنصر القابل للتجميع LazyHorizontalGrid الاتجاه الأفقي للشبكة.
    • لإنشاء شبكة رأسية، استخدِم LazyVerticalGrid بدلاً من ذلك.
  • تحدّد السمة rows كيفية ترتيب محتوى الشبكة.
    • بالنسبة إلى الشبكة العمودية، استخدِم السمة columns لتحديد الترتيب.
  • يضيف items(itemsList) itemsList إلى LazyHorizontalGrid. تعرِض دالة lambda عنصرًا قابلاً للتجميع من النوع Text لكل عنصر وتضبط النص على وصفه.
  • تضيف item() عنصرًا واحدًا إلى LazyHorizontalGrid، في حين أنّ دالة lambda تعرِض Text واحدًا قابلاً للتجميع بطريقة مشابهة لitems().
  • تحدِّد GridCells.Fixed عدد الصفوف أو الأعمدة.

  • لإنشاء شبكة تحتوي على أكبر عدد ممكن من الصفوف، اضبط عدد الصفوف باستخدام GridCells.Adaptive.

    في الرمز التالي، تحدد القيمة 20.dp أنّ كل عمود لا يقلّ عن 20.dp، وأنّ جميع الأعمدة لها عرض متساوٍ. إذا كانت الشاشة عريضة بـ 88.dp، سيكون هناك 4 أعمدة بحجم 22.dp لكل منها.

النتائج

الشكل 1. شبكة أفقية قابلة للتنقّل باستخدام LazyHorizontalGrid.

المجموعات التي تتضمّن هذا الدليل

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

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

إذا كانت لديك أسئلة أو ملاحظات

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