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 में दो 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 के काम करने के तरीके के बारे में ज़्यादा जानने के लिए, कंटेनर के काम करने का तरीका सेट करना और आइटम के काम करने का तरीका सेट करना लेख पढ़ें.