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

لضبط سلوك الحاوية 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 في سطر جديد.