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

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

प्रोजेक्ट सेट अप करें

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

   [versions]
   compose = "1.13.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)
    }
) {
    // 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 के व्यवहार के बारे में ज़्यादा जानने के लिए, कंटेनर का व्यवहार सेट करें और आइटम का व्यवहार सेट करें देखें.