بدء استخدام FlexBox

توضّح هذه الصفحة كيفية تنفيذ تنسيقات FlexBox الأساسية.

إعداد المشروع

  1. أضِف مكتبة androidx.compose.foundation.layout إلى ملف lib.versions.toml في مشروعك.

    [versions]
compose = "1.13.0-beta01"

[libraries]
androidx-compose-foundation-layout = { group = "androidx.compose.foundation", name = "foundation-layout", version.ref = "compose" }

  2. أضِف تبعية المكتبة إلى ملف build.gradle.kts في تطبيقك.

    dependencies {
    implementation(libs.androidx.compose.foundation.layout)
}

إنشاء تنسيقات FlexBox الأساسية

المثال 1: يضع FlexBox عنصرَي Text في محاذاة مركزية.

FlexBox(
    config = {
        direction(FlexDirection.Column)
        alignItems(FlexAlignItems.Center)
    }
) {
    Text(text = "Hello", fontSize = 48.sp)
    Text(text = "World!", fontSize = 48.sp)
}

دوال مركّبة لنص Hello World مكدّسة فوق بعضها البعض في تنفيذ أساسي لنموذج FlexBox

المثال 2: يلفّ FlexBox خمسة عناصر في صفَّين ويكبّرها بشكل غير متساوٍ لملء المساحة المتاحة في كل صف. هناك فجوة 8.dp بين العناصر، سواء رأسيًا أو أفقيًا.

FlexBox(
    config = {
        wrap(FlexWrap.Wrap)
        gap(8.dp)
    }
) {
    // All boxes have an intrinsic width of 100.dp
    // Some grow to fill any remaining space on the row.
    RedRoundedBox()
    BlueRoundedBox()
    GreenRoundedBox(modifier = Modifier.flex { grow(1.0f) })
    OrangeRoundedBox(modifier = Modifier.flex { grow(1.0f) })
    PinkRoundedBox(modifier = Modifier.flex { grow(1.0f) })
}

صفّان من العناصر الملوّنة، مع ثلاثة عناصر غير متساوية الحجم موزّعة على الصف العلوي وعنصرَين غير متساويَي الحجم على الصف السفلي

لمزيد من المعلومات عن سلوك FlexBox، يُرجى الاطّلاع على ضبط سلوك الحاوية وضبط سلوك العنصر.