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

استخدِم 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 مقدار المساحة التي سيحصل عليها العنصر، أو بالأحرى، مقدار المساحة التي سيتقلّص بها العنصر. بشكل تلقائي، تكون قيمة 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