ضبط سلوك العنصر

استخدِم Modifier.flex للتحكّم في طريقة تغيير حجم عنصر وترتيبه ومحاذاته داخل FlexBox.

حجم السلعة

استخدِم الدوال basis وgrow وshrink للتحكّم في حجم عنصر.

FlexBox {
    RedRoundedBox(
        modifier = Modifier.flex {
            basis(FlexBasis.Auto)
            grow(1.0f)
            shrink(0.5f)
        }
    )
}
FlexBoxSnippets.kt

ضبط الحجم الأوّلي

استخدِم basis لتحديد الحجم الأولي للعنصر قبل توزيع أي مساحة إضافية. يمكنك اعتبار ذلك الحجم المفضّل للعنصر.

نوع القيمة	السلوك	مقتطف الرمز ملاحظة: يبلغ الحد الأقصى للحجم الداخلي للمربّعات 100dp	مثال باستخدام عرض الحاوية 600dp
Auto (تلقائي)	استخدِم الحدّ الأقصى للحجم الأصلي للعنصر. على سبيل المثال، الحد الأقصى للعرض الداخلي لعنصر Text قابل للإنشاء هو عرض كل النص الخاص به في سطر واحد بدون التفاف.	FlexBox { RedRoundedBox( Modifier.flex { basis(FlexBasis.Auto) } ) BlueRoundedBox( Modifier.flex { basis(FlexBasis.Auto) } ) } FlexBoxSnippets.kt
السعر الثابت dp	حجم ثابت بوحدة dp	FlexBox { RedRoundedBox( Modifier.flex { basis(200.dp) } ) BlueRoundedBox( Modifier.flex { basis(100.dp) } ) } FlexBoxSnippets.kt
نسبة مئوية	نسبة مئوية من حجم الحاوية	FlexBox { RedRoundedBox( Modifier.flex { basis(0.7f) } ) BlueRoundedBox( Modifier.flex { basis(0.3f) } ) } FlexBoxSnippets.kt

إذا كانت قيمة الأساس أقل من الحد الأدنى للحجم الداخلي للعنصر، يتم استخدام الحد الأدنى للحجم الداخلي بدلاً من ذلك. على سبيل المثال، إذا كان Text عنصرًا يحتوي على كلمة ويتطلّب عرض 50dp، ولكنّه يتضمّن أيضًا basis = 10.dp، سيتم استخدام قيمة 50dp.

توسيع العناصر عندما تكون هناك مساحة

استخدِم grow لتحديد مقدار زيادة حجم العنصر عند توفّر مساحة إضافية. هذه هي المساحة المتبقية في الحاوية FlexBox بعد جمع كل قيم basis الخاصة بالعناصر. تشير القيمة grow إلى مقدار المساحة الإضافية التي سيتلقّاها عنصر فرعي معيّن، مقارنةً بالعناصر الفرعية الأخرى. لن تتوسّع العناصر تلقائيًا.

يعرض المثال التالي FlexBox يتضمّن ثلاثة عناصر فرعية. يحتوي كل منها على قيمة أساسية تبلغ 100dp. يحتوي الطفل الأول على قيمة grow موجبة. بما أنّه لا يوجد سوى عنصر فرعي واحد بقيمة grow، فإنّ القيمة الفعلية غير مهمة، فما دام أنّها موجبة، سيحصل العنصر الفرعي على كل المساحة الإضافية.

تعرض الصور سلوك FlexBox عندما يكون حجم الحاوية 600dp.

FlexBox { RedRoundedBox( title = "400dp", modifier = Modifier.flex { grow(1f) } ) BlueRoundedBox(title = "100dp") GreenRoundedBox(title = "100dp") } FlexBoxSnippets.kt

لكل عنصر فرعي قيمة أساسية تبلغ 100dp. هناك 300dp من المساحة الإضافية. يزداد حجم العنصر الفرعي 1 بمقدار 300dp لملء المساحة الإضافية.

في المثال التالي، يكون حجم الحاوية وحجم basis متطابقَين. ويكمن الاختلاف في أنّ كل منتج فرعي له قيمة grow مختلفة.

FlexBox { RedRoundedBox( title = "150dp", modifier = Modifier.flex { grow(1f) } ) BlueRoundedBox( title = "200dp", modifier = Modifier.flex { grow(2f) } ) GreenRoundedBox( title = "250dp", modifier = Modifier.flex { grow(3f) } ) } FlexBoxSnippets.kt

لكل عنصر فرعي قيمة أساسية تبلغ 100dp. هناك 300dp من المساحة الإضافية. القيمة الإجمالية للنمو هي 6. يزداد عدد سكان الطفل 1 بمقدار (1 / 6) * 300 = 50dp يزيد وزن الطفل الثاني بمقدار (2 / 6) * 300 = 100dp يزداد طول الطفل 3 بمقدار (3 / 6) * 300 = 150dp

تصغير العناصر عندما لا تتوفّر مساحة كافية

استخدِم shrink لتحديد مقدار تصغير العنصر عندما لا يتوفّر في الحاوية FlexBox مساحة كافية لجميع العناصر. تعمل الدالة shrink بالطريقة نفسها التي تعمل بها الدالة grow، باستثناء أنّه بدلاً من توزيع المساحة الإضافية على العناصر، يتم توزيع نقص المساحة على العناصر. تحدّد القيمة shrink مقدار المساحة التي سيحصل عليها العنصر، أو بالأحرى، مقدار المساحة التي سيتقلّص بها العنصر. بشكل تلقائي، تحتوي العناصر على قيمة shrink تبلغ 1f، ما يعني أنّها تتقلّص بالتساوي.

يعرض المثال التالي دالتَين مركّبتَين Text تتضمّنان النص نفسه. يحتوي العنصر الفرعي الأول على قيمة تصغير تبلغ 1f، ما يعني أنّه سيتم تصغيره لاستيعاب كل المساحة غير المتوفّرة.

FlexBox {
    Text(
        "The quick brown fox",
        fontSize = 36.sp,
        modifier = Modifier
            .background(PastelRed)
            .flex { shrink(1f) }
    )
    Text(
        "The quick brown fox",
        fontSize = 36.sp,
        modifier = Modifier
            .background(PastelBlue)
            .flex { shrink(0f) }
    )
}
FlexBoxSnippets.kt

مع تقلّص حجم الحاوية، يتقلّص حجم العنصر الثانوي 1.

حجم الحاوية	واجهة مستخدم FlexBox
700dp
500dp
450dp

محاذاة العناصر

استخدِم alignSelf للتحكّم في كيفية محاذاة عنصر مع المحور العرضي. يؤدي ذلك إلى إلغاء السمة alignItems للحاوية لهذا العنصر. وتتضمّن جميع القيم المحتملة نفسها، بالإضافة إلى Auto التي ترث سلوك الحاوية FlexBox.

على سبيل المثال، تحتوي هذه السمة FlexBox على alignItems مضبوطة على Start وخمس عناصر فرعية تتجاوز محاذاة المحور العرضي.

FlexBox(
    config = {
        alignItems(FlexAlignItems.Start)
    }
) {
    RedRoundedBox()
    BlueRoundedBox(modifier = Modifier.flex { alignSelf(FlexAlignSelf.Center) })
    GreenRoundedBox(modifier = Modifier.flex { alignSelf(FlexAlignSelf.End) })
    PinkRoundedBox(modifier = Modifier.flex { alignSelf(FlexAlignSelf.Stretch) })
    OrangeRoundedBox(modifier = Modifier.flex { alignSelf(FlexAlignSelf.Baseline) })
}
FlexBoxSnippets.kt

ترتيب السلع

تلقائيًا، ترتّب FlexBox العناصر بالترتيب الذي تم تعريفها به في الرمز. يمكنك تجاهل هذا السلوك باستخدام order.

القيمة التلقائية لـ order هي صفر، وتعمل FlexBox على ترتيب العناصر استنادًا إلى هذه القيمة بترتيب تصاعدي. يتم ترتيب أي عناصر تتضمّن القيمة order بالترتيب نفسه الذي تم الإعلان عنها به. استخدِم قيمًا سالبة وموجبة order لنقل العناصر إلى بداية أو نهاية التنسيق بدون تغيير مكان تعريفها.

يعرض المثال التالي عنصرَين فرعيَين. تحتوي السمة الأولى على القيمة التلقائية order للصفر، وتحتوي السمة الثانية على ترتيب -1. بعد الترتيب، يظهر حساب الطفل 1 بعد حساب الطفل 2.

FlexBox {
    // Declared first, but will be placed after visually
    RedRoundedBox(
        title = "World"
    )

    // Declared second, but will be placed first visually
    BlueRoundedBox(
        title = "Hello",
        modifier = Modifier.flex {
            order(-1)
        }
    )
}
FlexBoxSnippets.kt