شروع کار با 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

مثال ۱ : 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 روی هم انباشته شده‌اند.

مثال ۲ : 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 ، به تنظیم رفتار کانتینر و تنظیم رفتار آیتم مراجعه کنید.

قبلی
نمای کلی
بعدی
تنظیم رفتار کانتینر