بدء استخدام FlexBox

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

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

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

    [versions]
compose = "1.11.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)
}
FlexBoxSnippets.kt

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

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

FlexBox(
    config = {
        wrap(FlexWrap.Wrap)
        gap(8.dp)
    }
) {
    RedRoundedBox()
    BlueRoundedBox()
    GreenRoundedBox(modifier = Modifier.width(350.dp).flex { grow(1.0f) })
    OrangeRoundedBox(modifier = Modifier.width(200.dp).flex { grow(0.7f) })
    PinkRoundedBox(modifier = Modifier.width(200.dp).flex { grow(0.3f) })
}
FlexBoxSnippets.kt

يتضمّن هذا التصميم صفَّين من العناصر الملوّنة، مع ثلاثة عناصر مختلفة الأحجام موزّعة على الصف العلوي وعنصرَين مختلفَي الأحجام موزّعَين على الصف السفلي.

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

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