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

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 { 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 को छोड़कर, सभी वैल्यू वही होती हैं जो 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

आइटम का क्रम

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