ضبط سلوك الحاوية

لضبط سلوك الحاوية FlexBox، أنشئ كتلة FlexBoxConfig وقدِّمها باستخدام المَعلمة config.

FlexBox(
    config = {
        direction(FlexDirection.Column)
        wrap(FlexWrap.Wrap)
        alignItems(FlexAlignItems.Center)
        alignContent(FlexAlignContent.SpaceAround)
        justifyContent(FlexJustifyContent.Center)
        gap(16.dp)
    }
) { // child items
}FlexBoxSnippets.kt

استخدِم FlexBoxConfig لتحديد اتجاه التنسيق وسلوك الالتفاف والمحاذاة والفجوات بين العناصر.

اتجاه التنسيق

تضبط الدالة direction المحور الرئيسي الذي يحدّد اتجاه ترتيب العناصر. يمكن إدخال القيم التالية:

‫Row (الإعداد التلقائي): يضبط المحور الرئيسي ليكون أفقيًا. في اللغات التي تُكتب من اليسار إلى اليمين، سيكون الترتيب من اليسار إلى اليمين، والعكس في اللغات التي تُكتب من اليمين إلى اليسار.
RowReverse: تعكس اتجاه Row.
Column: يضبط المحور الرئيسي ليكون عموديًا من الأعلى إلى الأسفل.
ColumnReverse: تعكس اتجاه Column.

محاذاة العناصر وتوزيع المساحة الإضافية

توضّح الأقسام التالية كيفية محاذاة العناصر وتوزيع المساحة الإضافية على المحورين الرئيسي والفرعي.

على طول المحور الرئيسي

استخدِم justifyContent لتوزيع العناصر على طول المحور الرئيسي. يوضّح الجدول التالي السلوك عند ضبط الاتجاه على Row.


`Start`
`Center`
`End`
`SpaceBetween`
`SpaceAround`
`SpaceEvenly`

على طول المحور العرضي

استخدِم alignItems لمحاذاة العناصر على طول المحور العرضي ضمن سطر واحد. يمكن تجاهل هذا السلوك من خلال العناصر الفردية باستخدام المعدِّل alignSelf.

تعرض الصور التالية السلوك عندما تكون جهة العرض Row:


	`Start`	`End`	`Center`	`Stretch`	`Baseline`

استخدِم alignContent لمحاذاة الأسطر مع المحور العرضي وتوزيع المساحة الإضافية بين الأسطر. لا تنطبق هذه السمة إلا عندما تكون هناك أسطر متعددة (تكون ميزة الالتفاف مفعّلة). تعرض الصور التالية السلوك عند ضبط الاتجاه على Row:


	`Start`	`End`	`Center`	`Stretch`	`SpaceBetween`	`SpaceAround`

تضمين العناصر

تتيح عملية اللفّ أن تصبح الحاوية FlexBox متعددة الأسطر، ما يؤدي إلى نقل العناصر التي لا تتسع إلى صف أو عمود جديد على طول المحور العرضي. ضبط سلوك الالتفاف باستخدام wrap

قيمة `FlexWrap`	مثال باستخدام الاتجاه `Row`
`NoWrap` (القيمة التلقائية): تمنع العناصر من الالتفاف. تفيض العناصر إذا كان الحجم الرئيسي غير كافٍ.
`Wrap`: عندما لا تتوفّر مساحة كافية لعنصر (بالإضافة إلى أي فجوة)، يتم إنشاء سطر جديد في اتجاه المحور المتقاطع. على سبيل المثال، إذا كانت الجهة `Row`، تتم إضافة سطر جديد أدناه.
‫`WrapReverse`: هي نفسها `Wrap`، باستثناء أنّه تتم إضافة السطر الجديد في الاتجاه المعاكس للمحور العرضي. على سبيل المثال، إذا كان الاتجاه `Row`، تتم إضافة سطر جديد في الأعلى.

يوضّح المثال التالي طريقة عمل خوارزمية التغليف FlexBox. تبلغ مساحة الحاوية FlexBox الرئيسية 100dp، مع ضبط wrap على FlexWrap.Wrap وفجوة تبلغ 8dp. يتضمّن هذا المثال ثلاثة عناصر تتضمّن basis 20dp و40dp و50dp على التوالي.

تتوفّر 100dp مساحة في قائمة الانتظار. الطفل 1 هو 20dp. تتوفّر مساحة، لذا يتم وضع "الطفل 1" في قائمة الانتظار.

العنصر الأول الذي تم وضعه في حاوية FlexBox — **الشكل 1.** العنصر الأول الذي تم وضعه في الحاوية `FlexBox`

تتوفّر 80dp مساحة في قائمة الانتظار. الفجوة هي 8dp. الطفل 2 هو 40dp. المساحة المطلوبة هي 48dp. تتوفّر مساحة، لذا يتم وضع الفجوة و"الطفل 2" في السطر.

تتوفّر 32dp مساحة في الصف. الفجوة هي 8dp. الطفل 3 هو 50dp. المساحة المطلوبة هي 58dp. لا تتوفّر مساحة كافية في السطر الحالي، لذا تم وضع Child 3 في سطر جديد.