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

استخدِم 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 بمقدار (2 / 6) * 300 = 100dp يزداد الطفل 3 بمقدار (3 / 6) * 300 = 150dp

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

استخدِم السمة shrink لتحديد مقدار تقلُّص العنصر عندما لا تتوفّر مساحة كافية لجميع العناصر في حاوية FlexBox. تعمل السمة shrink بالطريقة نفسها التي تعمل بها السمة grow، إلا أنّه بدلاً من توزيع المساحة الإضافية على العناصر، يتم توزيع العجز في المساحة على العناصر. تحدّد قيمة shrink مقدار العجز في المساحة الذي يتلقّاه العنصر، أو بالأحرى مقدار تقلّص العنصر. By default, items have a shrink value of 1f, meaning they shrink equally.

يعرض المثال التالي دالتَين مركّبتَين من النوع 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