بدء استخدام FlexBox

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

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

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

    [versions]
compose = "1.11.0-beta02"

[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، اطّلِع على ضبط سلوك الحاوية وضبط سلوك العنصر.

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