القوائم الكسولة في شبكة

رمز تقييم بأربع نجوم

تنشئ الدالة المركّبة Grid تصاميم شاشة هيكلية ثنائية الأبعاد. يحدّد Grid بنية تخطيط متجاوبة باستخدام مسارات (صفوف وأعمدة) وفجوات محدّدة بشكل صريح كبنية أساسية لواجهة المستخدم.

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

لعرض مجموعات كبيرة من البيانات ضمن تنسيق شاشة منظَّم، يمكنك تضمين مكوّنات التحميل الكسول، مثل LazyColumn أو LazyRow في خلايا Grid. But note: flexible tracks (with specifications such as 1.fr) query the intrinsic sizes of child elements. بما أنّ SubcomposeLayout لا يتيح عمليات القياس الجوهرية، يؤدي وضع قائمة بطيئة داخل مسار مرن إلى حدوث عطل في IllegalStateException. لوضع القوائم الكسولة بأمان داخل مسار شبكة مرن، يجب استخدام حجم GridTrackSize.MinMax (مثل minmax(0.dp, 1.fr)) لتجاوز مسار القياس الجوهري.

تخطيط شاشة يتضمّن رأسًا في الأعلى وقائمة عناصر قابلة للتمرير في منطقة المحتوى الرئيسية وتذييلاً في الأسفل
الشكل 1. تخطيط شاشة هيكلي يتضمّن رأسًا وتذييلاً وLazyColumn مضمّنًا للمحتوى

أفضل الممارسات

  • استخدام القوائم الكسولة بدلاً من الحلقات الصريحة الكبيرة: لعرض مجموعات بيانات كبيرة أو ديناميكية ضمن Grid منظَّم، يمكنك تضمين مكوّنات كسولة (عادةً LazyColumn أو LazyRow) داخل خلايا شبكة معيّنة بدلاً من إنشاء حلقات صريحة كبيرة على العناصر، لأنّ Grid لا يعيد تدوير العناصر ولديه حدّ أقصى يبلغ 1000 مسار.
  • استخدام حجم المسار MinMax للقوائم الكسولة: بما أنّ LazyColumn وLazyRow لا يتيحان عمليات قياس الحجم الجوهري (يُرجى الاطّلاع على SubcomposeLayout)، يمكنك استخدام GridTrackSize.MinMax في المسارات المرنة التي تستضيف مكوّنات كسولة لتجاوز عمليات قياس الحجم الجوهري بأمان.

المكوّنات

  • ‫Grid: تنسيق قابل للإنشاء يضع العناصر في بنية شبكة ثنائية الأبعاد تم ضبطها باستخدام مسارات صفوف وأعمدة صريحة
  • ‫LazyColumn: قائمة تمرير عمودية تنشئ وتعيد تدوير العناصر المرئية حاليًا على الشاشة فقط.
  • ‫GridTrackSize.MinMax: سمة لتحديد حجم المسار تحدّد حدودًا مرنة (min وmax) لاستضافة المكوّنات التي يتم تحميلها ببطء بأمان بدون التسبّب في تعطُّل قياس وقت التشغيل.
  • ‫gridItem: هي إضافة Compose Modifier التي تخصص عنصرًا ثانويًا في واجهة المستخدم لخلية معيّنة أو منطقة مُسمّاة داخل Grid.

الخطوات

يمكنك تنظيم تنسيق الشاشة من خلال تحديد معرّفات المناطق الدلالية، وضبط مسارات الشبكة باستخدام حجم minmax للتوافق مع القائمة الكسولة، وتضمين LazyColumn داخل منطقة محتوى الشبكة.

1. ضبط مسارات الشبكة والمناطق المحدّدة

أنشئ فئة enum لتمثيل المناطق المختلفة لتخطيط الشاشة، وحدِّد دالة lambda GridConfigurationScope لمسارات التخطيط والمناطق المُسمّاة. استخدِم GridTrackSize.MaxContent لصفوف الرأس والتذييل لتناسب أبعاد المحتوى، واستخدِم minmax(0.dp, 1.fr) لمسار المحتوى الذي يستضيف القائمة الكسولة لتخصيص مساحة مرنة بدون طلب قياسات جوهرية غير متوافقة:

enum class ScreenArea {
    Header,
    Content,
    Footer
}


val lazyConfig: GridConfigurationScope.() -> Unit = {
    column(minmax(0.dp, 1.fr))
    row(GridTrackSize.MaxContent)
    row(minmax(0.dp, 1.fr))
    row(GridTrackSize.MaxContent)

    area(ScreenArea.Header, row = 1, column = 1)
    area(ScreenArea.Content, row = 2, column = 1)
    area(ScreenArea.Footer, row = 3, column = 1)
    gap(8.dp)
}

2. وضع المكوّنات الثابتة في الشبكة

في الدالة المركّبة، مرِّر lazyConfig إلى حاوية Grid. داخل دالة lambda content، ضع المكوّنات الثابتة (Header وFooter) وحدِّد موضعها باستخدام Modifier.gridItem() مع معرّفات المساحة الخاصة بها.

3- تضمين LazyColumn في منطقة المحتوى

في خلية المحتوى، يمكنك تضمين LazyColumn باستخدام Modifier.gridItem(ScreenArea.Content). بما أنّه تم ضبط مسار المحتوى باستخدام minmax(0.dp, 1.fr) في الخطوة 1، يمكن لـ LazyColumn قياس العناصر وإعادة تدويرها بأمان عند الانتقال للأعلى أو للأسفل بدون طلب أبعاد جوهرية غير متوافقة:

@Composable
fun GridWithLazyColumn(
    modifier: Modifier = Modifier,
    items: List<String> = emptyList(),
) {
    Grid(
        modifier = modifier.fillMaxSize(),
        config = lazyConfig
    ) {
        Text("Header", Modifier.gridItem(ScreenArea.Header).padding(16.dp))
        Text("Footer", Modifier.gridItem(ScreenArea.Footer).padding(16.dp))

        // LazyColumn placed in the content area for large datasets
        LazyColumn(
            modifier = Modifier
                .gridItem(ScreenArea.Content)
                .fillMaxSize(),
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            items(items) { item ->
                Text(item, Modifier.padding(16.dp))
            }
        }
    }
}

النتائج

يستخدم تخطيط الشاشة الآن واجهة برمجة التطبيقات Grid لتحديد بنية الصفحة ثنائية الأبعاد بشكل عام، مع تضمين LazyColumn في مسار مرن بحجم minmax لإعادة تدوير عناصر القائمة بكفاءة وتجنب استثناءات وقت التشغيل.

مراجع إضافية