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

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

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

تحديد شبكة

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

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

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

يأخذ Grid عناصر واجهة المستخدم في تعبير lambda 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

الشكل 1. يتم وضع ست بطاقات في شبكة تتضمّن ثلاثة صفوف وعمودَين.

لتغيير هذا السلوك التلقائي إلى التعبئة حسب العمود، اضبط السمة 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

الشكل 2. ‫GridFlow.Row (يسار) وGridFlow.Column (يمين)

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

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

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

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

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

الشكل 3 ارتفاعات الصفوف المحدّدة باستخدام خيارات تحديد حجم المسار الأساسية الأربعة في Grid

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

يمكنك استخدام تحديد الحجم الداخلي لعنصر 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

الشكل 4. الأحجام الجوهرية المحدّدة في الأعمدة

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

بعد تحديد حجم مسارات الشبكة، يمكنك تعديل فجوة الشبكة لتحسين التباعد بين المسارات. يمكنك تحديد فجوة الأعمدة باستخدام الدالة 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

الشكل 5 الفراغات بين الصفوف والأعمدة

يمكنك أيضًا استخدام الدالة المريحة 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