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

استخدِم 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