ফ্লেক্সবক্স দিয়ে শুরু করুন

এই পৃষ্ঠাটি বর্ণনা করে কিভাবে মৌলিক FlexBox লেআউট বাস্তবায়ন করতে হয়।

প্রকল্প সেট আপ করুন

1. আপনার প্রকল্পের lib.versions.toml এ androidx.compose.foundation.layout লাইব্রেরি যোগ করুন।

   [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 দুটি Text এলিমেন্ট তৈরি করে যা কেন্দ্রীভূতভাবে সারিবদ্ধ।

FlexBox(
    config = {
        direction(FlexDirection.Column)
        alignItems(FlexAlignItems.Center)
    }
) {
    Text(text = "Hello", fontSize = 48.sp)
    Text(text = "World!", fontSize = 48.sp)
}
FlexBoxSnippets.kt

উদাহরণ ২ : 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 আচরণ সম্পর্কে আরও জানতে, কনটেইনার আচরণ সেট করুন এবং আইটেম আচরণ সেট করুন দেখুন।