Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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

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