عناصر في واجهة المستخدم المُركّبة مع الشبكة

تم تصميم واجهة برمجة التطبيقات Grid في Jetpack Compose لتوفير تصاميم شاشة ثنائية الأبعاد ذات بنية محددة. على عكس الشبكات الكسولة التي تم تحسينها لمجموعات البيانات الكبيرة، تتيح لك Grid تحديد بنية تخطيط ثابتة أو متجاوبة باستخدام المسارات (الصفوف والأعمدة) والفجوات ومساحات الشبكة. يمكنك وضع العناصر في هذا الهيكل باستخدام Modifier.gridItem، ما يتيح لك التحكّم بشكل صريح في موضع العناصر ومدى انتشارها ضمن حاوية الشبكة.

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

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

• ترتيب البيان: يتبع Grid الترتيب العادي zIndex استنادًا إلى ترتيب البيان ضمن حزمة Grid. يتم عرض العناصر التي تم تحديدها لاحقًا في كتلة المحتوى Grid فوق العناصر التي تم تحديدها سابقًا.
• التحكّم الصريح في z-index: استخدِم Modifier.zIndex إذا كنت بحاجة إلى التحكّم بشكل صريح في ترتيب الرسم التلقائي للعناصر المتداخلة أو إلغائه.
• المنطقة المسماة مقابل تراكبات العناصر: استخدِم Grid والمناطق المسماة لتحديد بنية التصميم، ولكن احتفِظ بمنطق التراكب المعقّد داخل gridItem المحدّد إذا كانت هذه التراكبات مرتبطة منطقيًا بخلية الشبكة هذه.
• المدى المقصود للتراكبات: عند التراكب، تأكَّد من أنّ المَعلمتَين rowSpan وcolumnSpan مقصودتان للعناصر المتراكبة من أجل التحكّم في مقدار المحتوى الأساسي الذي يتم إخفاؤه.

المكوّنات

• ‫Grid: حاوية تخطيط ثنائية الأبعاد وبنيوية
• ‫GridConfigurationScope.area: دالة النطاق المستخدَمة لتحديد المناطق المُسمّاة ومناطق التراكب على مستوى مسارات الشبكة
• ‫Modifier.gridItem: أداة تعديل تُستخدَم لوضع عناصر قابلة للإنشاء وتوسيعها على مستوى مسارات الشبكة أو في مساحات الشبكة المسماة
• ‫Modifier.zIndex: معدِّل يُستخدَم للتحكّم بشكل صريح في ترتيب الرسم وارتفاع الطبقة

الخطوات

اضبط تخطيط الشبكة والمناطق المحدّدة، وحدِّد موضع محتوى الطبقة الأساسية ضمن إحداثيات الشبكة المستهدَفة، وضَع عناصر التراكب في خلايا الشبكة المشترَكة أو المناطق المتداخلة.

1. تحديد إعدادات الشبكة

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

enum class Areas { BASE, OVERLAY }

val gridConfig: GridConfigurationScope.() -> Unit = {
    repeat(3) {
        column(GridTrackSize.Fixed(100.dp))
    }
    row(GridTrackSize.Fixed(100.dp))

    area(areaId = Areas.BASE, row = 1, column = 1, columnSpan = 2)
    // Define a named area spanning multiple columns that overlaps other cells
    area(areaId = Areas.OVERLAY, row = 1, column = 2, columnSpan = 2)
}
GridByExamples.kt

2. وضع المحتوى الأساسي وتحديد التراكبات

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

Grid(
    config = gridConfig,
) {
    // Base Layer
    TextCard("BASE", Modifier.gridItem(areaId = Areas.BASE))
    // Overlay Layer
    TextCard(
        "OVERLAY",
        Modifier.gridItem(areaId = Areas.OVERLAY),
        color = Color(0xDD4B608D)
    )
}
GridByExamples.kt

النتائج

تتراكب عناصر واجهة المستخدم بشكل متوقّع ضمن بنية الشبكة الثنائية الأبعاد. من خلال الاعتماد على ترتيب الإفصاحات العادي، يمكنك تجنُّب الحاويات المعقّدة المتداخلة مع الحفاظ على رمز تصميم واضح ومتجاوب.