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

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
प्रतिशत	कंटेनर के साइज़ का प्रतिशत.	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 अतिरिक्त जगह उपलब्ध है. पहले बच्चे की लंबाई 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 अतिरिक्त जगह उपलब्ध है. कुल बढ़ोतरी की वैल्यू 6 है. पहले बच्चे के लिए, (1 / 6) * 300 = 50dp दूसरे बच्चे की लंबाई (2 / 6) * 300 = 100dp बढ़ जाएगी बच्चे 3 को (3 / 6) * 300 = 150dp पॉइंट मिलेंगे

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

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 भी शामिल होता है, जो 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

आइटम का क्रम

डिफ़ॉल्ट रूप से, 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