بدء استخدام FlexBox

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

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

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

    [versions]
compose = "1.12.0-alpha01"

[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)
}
FlexBoxSnippets.kt

عناصر 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) })
}
FlexBoxSnippets.kt

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

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

السابق
نظرة عامة
التالي
ضبط سلوك الحاوية