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

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

في هذه الوصفة، يمكنك إنشاء جدول باستخدام واجهة برمجة التطبيقات 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")
    }
}
GridByExamples.kt

النتائج

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

مراجع إضافية

• الشبكة في Compose
• ضبط خصائص الحاوية