بدء استخدام FlexBox

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

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

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

    [versions]
compose = "1.11.0-alpha06"

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

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