تنسيق جدول الشبكة

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

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

في هذه الوصفة، يمكنك إنشاء جدول باستخدام واجهة برمجة تطبيقات Grid.

الجدول 1: مقارنة بين ميزات واجهتَي برمجة التطبيقات FlexBox وGrid
التنسيق التحميل الكسول التفاف النص تعديل التنسيق الديناميكي
FlexBox يوم واحد لا نعم نعم
Grid ثنائي الأبعاد لا لا نعم

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

استخدِم الدالة المركّبة Grid لتحسين سهولة قراءة الجدول وصيانته. تتيح لك السمة Grid التحكّم بدقة في أبعاد الأعمدة ومحاذاتها في جميع الصفوف بدون مزامنة العرض يدويًا.

المكوّنات

  • ‫Grid: تنسيق مركّب يضع العناصر في شبكة ثنائية الأبعاد. يتم تحديد إعدادات التنسيق داخل مَعلمة lambda‏ config، بينما يتم تحديد عناصر محتوى واجهة المستخدم داخل مَعلمة lambda‏ content.
  • ‫GridTrackSize.Auto: تحدّد هذه السمة الحجم التلقائي للمسار ضمن إعدادات الشبكة استنادًا إلى الحجم الأساسي للمحتوى، مثل column(GridTrackSize.Auto) وrow(GridTrackSize.Auto).
  • gap(): تضبط هذه السمة تباعد الصفوف والأعمدة ضمن GridConfigurationScope، مثل gap(row = 8.dp, column = 16.dp).

الخطوات

يمكنك إنشاء جدول مقارنة متعدد الأعمدة باستخدام تنسيق Grid واحد مع محاذاة الأعمدة تلقائيًا وتحديد حجم المسار لجميع العناصر.

1. احتساب صفوف وأعمدة الشبكة لتحديد أحجام المسارات

أولاً، احسب الأعمدة والصفوف لتحديد حجم المسارات:

  • الأعمدة: عدد السمات التي تقارنها، بالإضافة إلى عمود واحد لاسم السلعة.
  • الصفوف: عدد العناصر التي تقارنها، بالإضافة إلى صف عنوان واحد.

بالنسبة إلى هذه الوصفة التي تقارن بين مكوّنَين (FlexBox وGrid) في أربع سمات، تحتاج إلى خمسة أعمدة وثلاثة صفوف.

2. تنفيذ جدول المقارنة باستخدام Grid

أنشِئ دالة مركّبة باسم TableInGrid تستخدم Grid لتنسيق عناصر الجدول. استدعِ الدالتَين column وrow داخل دالة lambda‏ config لتحديد أحجام المسارات، واضبط تباعد الخلايا باستخدام gap(). بما أنّ النص له حجم جوهري، يغيّر GridTrackSize.Auto حجم الأعمدة والصفوف تلقائيًا لتناسب محتواها.

داخل دالة lambda في content، ضع عناوين الجدول والبيانات. يتعامل Grid تلقائيًا مع موضع جميع الخلايا ومحاذاتها:

@Composable
fun TableInGrid(
    modifier: Modifier = Modifier,
) {
    Grid(
        config = {
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            gap(row = 8.dp, column = 16.dp)
        },
        modifier = modifier,
    ) {
        // Table Header
        Text(text = "", fontWeight = FontWeight.Bold)
        Text(text = "Layout", fontWeight = FontWeight.Bold)
        Text(text = "Lazy loading", fontWeight = FontWeight.Bold)
        Text(text = "Soft wrap", fontWeight = FontWeight.Bold)
        Text(text = "Dynamic layout update", fontWeight = FontWeight.Bold)

        // FlexBox Row
        Text(text = "FlexBox", fontWeight = FontWeight.Bold)
        Text(text = "1D")
        Text(text = "No")
        Text(text = "Yes")
        Text(text = "Yes")

        // Grid Row
        Text(text = "Grid", fontWeight = FontWeight.Bold)
        Text(text = "2D")
        Text(text = "No")
        Text(text = "No")
        Text(text = "Yes")
    }
}

النتائج

لقد أنشأت الآن جدول مقارنة ثنائي الأبعاد واضحًا مع محاذاة تلقائية للأعمدة وتباعد الخلايا.

الشكل 1. جدول المقارنة باستخدام Grid.

مراجع إضافية