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

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

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

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

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