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

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

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

تحديد شبكة

تتألف الشبكة من أعمدة وصفوف. يحتوي العنصر القابل للإنشاء 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

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

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

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