ضبط خصائص الحاوية

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

• تحديد شبكة: يمكنك إعداد البنية الأساسية للصفوف والأعمدة.
• وضع العناصر في شبكة: يمكنك التعرّف على كيفية وضع العناصر في خلايا الشبكة وكيفية تغيير اتجاه التدفق.
• إدارة حجم المسار: يمكنك استخدام أحجام المسارات الثابتة والنسبة المئوية والمرنة والجوهرية لضبط أحجام المسارات.
• ضبط الفواصل: يمكنك إدارة "المسافات" بين الصفوف والأعمدة.

تحديد شبكة

تتكوّن الشبكة من أعمدة وصفوف. يتضمّن العنصر الإنشائي Grid مَعلمة config تقبل تعبير لامدا لتحديد الأعمدة والصفوف ضمن GridConfigurationScope. يحدّد المثال التالي شبكة تتضمّن ثلاثة صفوف وعمودَين، لكل منهما حجم ثابت محدّد في Dp:

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
}
DefineGrid.kt

وضع العناصر في شبكة

يأخذ العنصر الإنشائي Grid عناصر واجهة المستخدم في تعبير لامدا content ويضعها في خلايا الشبكة. تنسّق الشبكة العناصر بغض النظر عمّا إذا كنت قد حدّدت الصفوف والأعمدة بشكلٍ صريح. يحاول العنصر الإنشائي Grid بشكلٍ تلقائي وضع عنصر في واجهة المستخدم في خلية الشبكة المتاحة في الصف. وإذا لم يتمكّن من ذلك، يضعه في خلية شبكة متاحة في الصف التالي. إذا لم تكن هناك خلايا فارغة، ينشئ العنصر الإنشائي Grid صفًا جديدًا.

في المثال التالي، تتضمّن الشبكة ست خلايا وتضع بطاقة في كل منها (الشكل 1). تبلغ أبعاد كل خلية في الشبكة 160dp × 90dp، ما يجعل إجمالي حجم الشبكة 320dp × 270dp.

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
DefineGrid.kt

لتغيير هذا السلوك التلقائي إلى التعبئة حسب العمود، اضبط السمة flow على GridFlow.Column.

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp)
        flow = GridFlow.Column // Grid tries to place items to fill the column
    },
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridItem.kt

إدارة حجم المسار

يُشار إلى الصفوف والأعمدة بشكلٍ جماعي باسم مسار الشبكة. يمكنك تحديد حجم مسار الشبكة باستخدام إحدى الطرق التالية:

• ثابت (Dp): يتم تخصيص حجم معيّن (مثلاً، column(180.dp)).
• النسبة المئوية (Float): يتم تخصيص نسبة مئوية من إجمالي المساحة المتاحة من 0.0f إلى 1.0f (مثلاً، row(0.5f) بنسبة %50).
• مرن (Fr): يتم توزيع المساحة المتبقية بالتناسب بعد احتساب المسارات الثابتة والنسبة المئوية. على سبيل المثال، إذا تم ضبط صفَّين على 1.fr و3.fr، يتلقّى الصف الأخير% 75 من الارتفاع المتبقي.
• جوهرية: يتم تحديد حجم المسار استنادًا إلى المحتوى بداخله. لمزيد من المعلومات، يُرجى الاطّلاع على تحديد حجم مسار الشبكة بشكلٍ جوهري.

يستخدم المثال التالي خيارات مختلفة لتحديد حجم المسار من أجل تحديد ارتفاعات الصفوف:

Grid(
    config = {
        column(1f)

        row(100.dp)
        row(0.2f)
        row(1.fr)
        row(GridTrackSize.Auto)
    },
    modifier = Modifier.height(480.dp)
) {
    PastelRedCard("Fixed(100.dp)")
GridTrackSize.kt

تحديد حجم مسار الشبكة بشكلٍ جوهري

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

• GridTrackSize.MaxContent: يتم استخدام الحد الأقصى للحجم الجوهري للمحتوى (مثلاً، يتم تحديد العرض حسب الطول الكامل للنص في كتلة نصية بدون التفاف).
• GridTrackSize.MinContent: يتم استخدام الحد الأدنى للحجم الجوهري للمحتوى (مثلاً، يتم تحديد العرض حسب أطول كلمة واحدة في كتلة نصية).
• GridTrackSize.Auto: يتم استخدام حجم مرن للمسار يتكيّف استنادًا إلى المساحة المتاحة. يتصرف هذا الخيار مثل MaxContent تلقائيًا، ولكن يتم تقليص المحتوى وتفافه ليناسب الحاوية الرئيسية.

يضع المثال التالي نصَّين جنبًا إلى جنب. يتم تحديد حجم عمود النص الأول حسب الحد الأدنى المطلوب لعرض النص، ويعتمد عرض العمود الثاني على الحد الأقصى المطلوب لعرض النص.

Grid(
    config = {
        column(GridTrackSize.MinContent)
        column(GridTrackSize.MaxContent)
        row(1.0f)
    },
    modifier = Modifier.width(480.dp)
) {
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet." )
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet." )
}
GridTrackSize.kt

ضبط الفواصل بين الصفوف والأعمدة

بعد تحديد حجم مسارات الشبكة، يمكنك تعديل الفاصل بين الشبكة لتحسين التباعد بين المسارات. يمكنك تحديد الفاصل بين الأعمدة باستخدام الدالة columnGap، والفاصل بين الصفوف باستخدام rowGap. في المثال التالي، هناك فاصل بمقدار 16dp بين كل صف، وفاصل بمقدار 8dp بين كل عمود (الشكل 5).

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(16.dp)
        columnGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridGap.kt

يمكنك أيضًا استخدام الدالة الملائمة gap لتحديد فواصل لها نفس حجم العمود والصف، ولتحديد أحجام العمود والفاصل بشكلٍ منفصل باستخدام دالة واحدة. يضيف الرمز التالي فواصل بمقدار 8dp إلى الشبكة:

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp) // Equivalent to columnGap(8.dp) and rowGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridGap.kt