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

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

توضّح هذه الوصفة كيف تحسّن واجهة برمجة التطبيقات 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

مراجع إضافية