تستخدم 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 في السطر. الطفل الأول هو 20dp. هناك مساحة، لذا يتم وضع الطفل 1 في الصف.

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

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

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

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