Google आपकी पसंदीदा भाषा में कॉन्टेंट का अनुवाद करने के लिए, एआई टेक्नोलॉजी का इस्तेमाल करता है. एआई से मिले अनुवादों में गलतियां हो सकती हैं.

आइटम के व्यवहार को सेट करना

Modifier.flex का इस्तेमाल करके, यह कंट्रोल करें कि FlexBox में किसी आइटम का साइज़, क्रम, और अलाइनमेंट कैसे बदलता है.

आइटम का साइज़

किसी आइटम का साइज़ कंट्रोल करने के लिए, basis, grow, और shrink फ़ंक्शन का इस्तेमाल करें.

FlexBox {
    RedRoundedBox(
        modifier = Modifier.flex {
            basis(FlexBasis.Auto)
            grow(1.0f)
            shrink(0.5f)
        }
    )
}FlexBoxSnippets.kt

शुरुआती साइज़ सेट करना

basis का इस्तेमाल करके, आइटम का शुरुआती साइज़ तय करें. इसके बाद ही, अतिरिक्त स्पेस को बांटा जाएगा. इसे आइटम का पसंदीदा साइज़ माना जा सकता है.

वैल्यू टाइप	व्यवहार	कोड स्निपेट ध्यान दें: बॉक्स का साइज़ ज़्यादा से ज़्यादा `100dp` हो सकता है	कंटेनर की चौड़ाई `600dp` का इस्तेमाल करने वाला उदाहरण
`Auto` (डिफ़ॉल्ट)	आइटम के ज़्यादा से ज़्यादा इंट्रिन्सिक साइज़ का इस्तेमाल करें. उदाहरण के लिए, `Text` कंपोज़ेबल की ज़्यादा से ज़्यादा इंट्रिन्सिक चौड़ाई, एक ही लाइन में मौजूद उसके सभी टेक्स्ट की चौड़ाई होती है. इसमें रैपिंग नहीं होती.	FlexBox { RedRoundedBox( Modifier.flex { basis(FlexBasis.Auto) } ) BlueRoundedBox( Modifier.flex { basis(FlexBasis.Auto) } ) } FlexBoxSnippets.kt
`dp` को ठीक किया गया	डीपी में तय साइज़.	FlexBox { RedRoundedBox( Modifier.flex { basis(200.dp) } ) BlueRoundedBox( Modifier.flex { basis(100.dp) } ) } FlexBoxSnippets.kt
Percentage	कंटेनर के साइज़ का प्रतिशत.	FlexBox { RedRoundedBox( Modifier.flex { basis(0.7f) } ) BlueRoundedBox( Modifier.flex { basis(0.3f) } ) } FlexBoxSnippets.kt

अगर बेसिस वैल्यू, आइटम के असल कम से कम साइज़ से कम है, तो इसके बजाय असल कम से कम साइज़ का इस्तेमाल किया जाता है. उदाहरण के लिए, अगर किसी Text आइटम में कोई ऐसा शब्द है जिसे दिखाने के लिए 50dp की ज़रूरत है, लेकिन उसमें basis = 10.dp भी है, तो 50dp की वैल्यू का इस्तेमाल किया जाता है.

जगह होने पर आइटम का साइज़ बढ़ाएं

grow का इस्तेमाल करके बताएं कि अतिरिक्त जगह होने पर, किसी आइटम का साइज़ कितना बढ़ता है. सभी आइटम की basis वैल्यू जोड़ने के बाद, FlexBox कंटेनर में बची हुई जगह को यह वैल्यू दिखाती है. grow वैल्यू से पता चलता है कि किसी चाइल्ड को अपने सिबलिंग के मुकाबले कितनी अतिरिक्त जगह मिलेगी. डिफ़ॉल्ट रूप से, आइटम का साइज़ नहीं बढ़ेगा.

इस उदाहरण में, तीन चाइल्ड आइटम वाला FlexBox दिखाया गया है. हर एक की बेसिस वैल्यू 100dp है. पहले चाइल्ड एलिमेंट की grow वैल्यू पॉज़िटिव है. चूंकि grow वैल्यू वाला सिर्फ़ एक चाइल्ड है, इसलिए असल वैल्यू मायने नहीं रखती - जब तक यह पॉज़िटिव है, तब तक चाइल्ड को सारी अतिरिक्त जगह मिलती है.

इमेज में, FlexBox का व्यवहार दिखाया गया है. ऐसा तब होता है, जब इसके कंटेनर का साइज़ 600dp हो.

FlexBox {
    RedRoundedBox(
        title = "400dp",
        modifier = Modifier.flex { grow(1f) }
    )
    BlueRoundedBox(title = "100dp")
    GreenRoundedBox(title = "100dp")
}FlexBoxSnippets.kt

हर चाइल्ड एलिमेंट की बेसिस वैल्यू 100dp होती है. आपके पास 300dp अतिरिक्त स्टोरेज है.

600dp के कंटेनर में, 100dp के साइज़ वाले तीन आइटम.

खाली जगह को भरने के लिए, चाइल्ड 1 का साइज़ 300dp बढ़ जाता है.

पहला आइटम, 300dp की अतिरिक्त जगह भरने के लिए बड़ा हो जाता है.

यहां दिए गए उदाहरण में, कंटेनर का साइज़ और basis का साइज़ एक जैसा है. इनमें अंतर यह है कि हर चाइल्ड एलिमेंट की grow वैल्यू अलग होती है.

FlexBox {
    RedRoundedBox(
        title = "150dp",
        modifier = Modifier.flex { grow(1f) }
    )
    BlueRoundedBox(
        title = "200dp",
        modifier = Modifier.flex { grow(2f) }
    )
    GreenRoundedBox(
        title = "250dp",
        modifier = Modifier.flex { grow(3f) }
    )
}FlexBoxSnippets.kt

हर चाइल्ड एलिमेंट की बेसिक वैल्यू 100dp होती है. आपके पास 300dp अतिरिक्त स्टोरेज है.

600dp के कंटेनर में, 100dp के तीन आइटम. ये आइटम, अलग-अलग वैल्यू के साथ बढ़ने से पहले की स्थिति में हैं.

कुल ग्रोथ वैल्यू 6 है.

पहले बच्चे की लंबाई (1 / 6) * 300 = 50dp बढ़ जाती है

चाइल्ड 2 की ग्रोथ (2 / 6) * 300 = 100dp होगी

तीसरे बच्चे की उम्र में (3 / 6) * 300 = 150dp की बढ़ोतरी हुई

आइटम, रिलेटिव ग्रो वैल्यू के आधार पर 300dp की अतिरिक्त जगह भरने के लिए बड़े हो जाते हैं.

जगह कम होने पर आइटम का साइज़ छोटा करना

shrink का इस्तेमाल करके बताएं कि जब FlexBox कंटेनर में सभी आइटम के लिए ज़रूरत के मुताबिक जगह न हो, तो किसी आइटम का साइज़ कितना छोटा किया जाए. shrink, grow की तरह ही काम करता है. हालांकि, इसमें आइटम को अतिरिक्त स्पेस देने के बजाय, स्पेस की कमी को आइटम में बांट दिया जाता है. shrink वैल्यू से पता चलता है कि आइटम को कितनी कम जगह मिलती है या आइटम कितना छोटा हो जाएगा. डिफ़ॉल्ट रूप से, आइटम की shrink वैल्यू 1f होती है. इसका मतलब है कि वे एक ही अनुपात में छोटे होते हैं.

यहां दिए गए उदाहरण में, एक ही टेक्स्ट वाले दो Text कंपोज़ेबल दिखाए गए हैं. पहले चाइल्ड एलिमेंट की श्रिंक वैल्यू 1f है. इसका मतलब है कि यह एलिमेंट, स्पेस की कमी को पूरा करने के लिए श्रिंक हो जाता है.

FlexBox {
    Text(
        "The quick brown fox",
        fontSize = 36.sp,
        modifier = Modifier
            .background(PastelRed)
            .flex { shrink(1f) }
    )
    Text(
        "The quick brown fox",
        fontSize = 36.sp,
        modifier = Modifier
            .background(PastelBlue)
            .flex { shrink(0f) }
    )
}FlexBoxSnippets.kt

कंटेनर का साइज़ छोटा होने पर, चाइल्ड 1 छोटा हो जाता है.

कंटेनर का साइज़	FlexBox यूज़र इंटरफ़ेस (यूआई)
`700dp`
`500dp`
`450dp`

आइटम अलाइनमेंट

alignSelf का इस्तेमाल करके, यह कंट्रोल करें कि किसी आइटम को क्रॉस ऐक्सिस पर कैसे अलाइन किया जाए. यह इस आइटम के कंटेनर की alignItems प्रॉपर्टी को बदल देता है. इसमें सभी संभावित वैल्यू एक जैसी होती हैं. साथ ही, इसमें Auto को जोड़ा जाता है, जो FlexBox कंटेनर के व्यवहार को इनहेरिट करता है.

उदाहरण के लिए, इस FlexBox में alignItems को Start पर सेट किया गया है और इसमें पांच चाइल्ड एलिमेंट हैं, जो क्रॉस ऐक्सिस अलाइनमेंट को बदल देते हैं.

FlexBox(
    config = {
        alignItems(FlexAlignItems.Start)
    }
) {
    RedRoundedBox()
    BlueRoundedBox(modifier = Modifier.flex { alignSelf(FlexAlignSelf.Center) })
    GreenRoundedBox(modifier = Modifier.flex { alignSelf(FlexAlignSelf.End) })
    PinkRoundedBox(modifier = Modifier.flex { alignSelf(FlexAlignSelf.Stretch) })
    OrangeRoundedBox(modifier = Modifier.flex { alignSelf(FlexAlignSelf.Baseline) })
}FlexBoxSnippets.kt

अलग-अलग साइज़ के पांच चाइल्ड, जो alignItems प्रॉपर्टी को बदल रहे हैं.

आइटम का क्रम

डिफ़ॉल्ट रूप से, FlexBox आइटम को उसी क्रम में दिखाता है जिस क्रम में उन्हें कोड में डिक्लेयर किया गया है. order का इस्तेमाल करके, इस व्यवहार को बदलें.

order की डिफ़ॉल्ट वैल्यू शून्य होती है. साथ ही, FlexBox इस वैल्यू के आधार पर आइटम को बढ़ते क्रम में क्रमबद्ध करता है. जिन आइटम की order वैल्यू एक जैसी होती है उन्हें उसी क्रम में लेआउट किया जाता है जिस क्रम में उन्हें तय किया गया है. आइटम को लेआउट के शुरू या आखिर में ले जाने के लिए, नेगेटिव और पॉज़िटिव order वैल्यू का इस्तेमाल करें. इसके लिए, आइटम के एलान की जगह बदलने की ज़रूरत नहीं है.

इस उदाहरण में दो चाइल्ड आइटम दिखाए गए हैं. पहले का डिफ़ॉल्ट order शून्य है और दूसरे का क्रम -1 है. क्रम से लगाने के बाद, Child 1, Child 2 के बाद दिखता है.

FlexBox {
    // Declared first, but will be placed after visually
    RedRoundedBox(
        title = "World"
    )

    // Declared second, but will be placed first visually
    BlueRoundedBox(
        title = "Hello",
        modifier = Modifier.flex {
            order(-1)
        }
    )
}FlexBoxSnippets.kt

गोल कोनों वाले दो बॉक्स. पहले बॉक्स में Hello और दूसरे बॉक्स में World टेक्स्ट लिखा है.

पीछे जाएं

कंटेनर के व्यवहार को सेट करना

आगे बढ़ें

अडैप्टिव ऐप्लिकेशन का इस्तेमाल शुरू करना