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

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

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

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

لعرض مجموعات كبيرة من البيانات ضمن تنسيق شاشة منظَّم، يمكنك تضمين مكوّنات يتم تحميلها عند الحاجة، مثل LazyColumn أو LazyRow، في خلايا Grid. يُرجى العِلم أنّ المسارات المرنة (التي تتضمّن مواصفات مثل 1.fr) تستعلم عن الأحجام الأصلية للعناصر الفرعية. بما أنّ SubcomposeLayout لا يتيح عمليات تمرير القياسات المضمّنة، سيؤدي وضع قائمة كسولة داخل مسار مرن إلى حدوث عطل IllegalStateException. لوضع قوائم التحميل الكسول بأمان داخل مسار شبكة مرن، يجب استخدام تحديد الحجم GridTrackSize.MinMax (مثل minmax(0.dp, 1.fr)) لتجاوز عملية القياس المضمّنة.

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

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

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

المكوّنات

  • ‫Grid: تخطيط قابل للإنشاء يضع العناصر في بنية شبكة ثنائية الأبعاد تم ضبطها باستخدام مسارات صفوف وأعمدة صريحة.
  • ‫LazyColumn: قائمة يمكن تمريرها عموديًا، وتتضمّن العناصر المرئية حاليًا على الشاشة فقط.
  • ‫GridTrackSize.MinMax: تتتبّع هذه السمة حجم العنصر الذي يحدّد الحدود المرنة (min وmax) لاستضافة المكوّنات التي يتم تحميلها عند الحاجة بأمان بدون حدوث أعطال في القياس أثناء وقت التشغيل.
  • gridItem: Compose Modifier extension that assigns a child عنصر في واجهة المستخدم to a specific cell or named area inside a Grid.

الخطوات

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

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

أنشئ فئة enum لتمثيل المناطق المميّزة في تخطيط الشاشة، وحدِّد تعبير GridConfigurationScope lambda لمسارات التخطيط والمناطق المسماة. استخدِم 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. داخل دالة content lambda، ضَع المكوّنات الثابتة (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 لإعادة استخدام عناصر القائمة بكفاءة وتجنُّب استثناءات وقت التشغيل.

مراجع إضافية