FlexBox का इस्तेमाल शुरू करना

इस पेज पर, FlexBox के बेसिक लेआउट लागू करने का तरीका बताया गया है.

प्रोजेक्ट सेट अप करना

1. अपने प्रोजेक्ट की lib.versions.toml में, androidx.compose.foundation.layout लाइब्रेरी जोड़ें.

   [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 के बेसिक लेआउट बनाना

पहला उदाहरण: 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)
    }
) {
    // 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 के बर्ताव के बारे में ज़्यादा जानने के लिए, कंटेनर का बर्ताव सेट करना और आइटम का बर्ताव सेट करना लेख पढ़ें.