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`	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 का इस्तेमाल करके यह तय करें कि ज़्यादा जगह होने पर कोई आइटम कितना बड़ा हो. यह FlexBox कंटेनर में बची हुई जगह है. यह जगह, सभी आइटम की basis वैल्यू जोड़ने के बाद बचती है. grow वैल्यू से पता चलता है कि किसी चाइल्ड को उसके भाई-बहनों की तुलना में कितना अतिरिक्त स्पेस मिलेगा. डिफ़ॉल्ट रूप से, आइटम बड़े नहीं होंगे.

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

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

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

हर चाइल्ड की बेसिस वैल्यू 100dp होती है. 300dp अतिरिक्त जगह उपलब्ध है.

बढ़ोतरी से पहले, 600 डीपी वाले कंटेनर में 100 डीपी के आधार पर तीन आइटम.

पहले बच्चे की इमेज को 300dp तक बड़ा किया जाता है, ताकि वह अतिरिक्त जगह को भर सके.

पहले आइटम का साइज़ बढ़कर, 300 डीपी का अतिरिक्त स्पेस भर जाता है.

यहां दिए गए उदाहरण में, कंटेनर का साइज़ और 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 अतिरिक्त जगह उपलब्ध है.

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

कुल बढ़ोतरी की वैल्यू 6 है.

पहले बच्चे की उम्र (1 / 6) * 300 = 50dp साल

दूसरे बच्चे को (2 / 6) * 300 = 100dp अंक मिलेंगे

बच्चे 3 की उम्र (3 / 6) * 300 = 150dp दिन बढ़ जाएगी

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

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

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 UI
`700dp`
`500dp`
`450dp`

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

किसी आइटम को क्रॉस ऐक्सिस के साथ अलाइन करने के तरीके को कंट्रोल करने के लिए, alignSelf का इस्तेमाल करें. यह इस आइटम के लिए, कंटेनर की alignItems प्रॉपर्टी को बदलता है. इसमें Auto के साथ-साथ, वही सभी संभावित वैल्यू होती हैं. 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 का क्रम है. सॉर्ट करने के बाद, चाइल्ड 1, चाइल्ड 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

दो गोल बॉक्स. पहले बॉक्स में 'नमस्ते' और दूसरे बॉक्स में 'दुनिया' लिखा है.

पीछे जाएं

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

आगे बढ़ें

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