इस पेज का अनुवाद Cloud Translation API से किया गया है.

Compose में फ़्लो लेआउट
संग्रह की मदद से व्यवस्थित रहें अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.

FlowRow और FlowColumn, Row और Column जैसे कॉम्पोज़ेबल हैं. हालांकि, इनमें अंतर यह है कि कंटेनर में जगह खत्म होने पर आइटम अगली लाइन में चले जाते हैं. इससे कई पंक्तियां या कॉलम बन जाते हैं. maxItemsInEachRow या maxItemsInEachColumn सेट करके भी, किसी लाइन में मौजूद आइटम की संख्या को कंट्रोल किया जा सकता है. रिस्पॉन्सिव लेआउट बनाने के लिए, अक्सर FlowRow और FlowColumn का इस्तेमाल किया जा सकता है. अगर किसी डाइमेंशन के लिए आइटम बहुत बड़े हैं, तो कॉन्टेंट काट नहीं जाएगा. साथ ही, maxItemsInEach* और Modifier.weight(weight) के कॉम्बिनेशन का इस्तेमाल करके, ऐसे लेआउट बनाए जा सकते हैं जो ज़रूरत पड़ने पर किसी लाइन या कॉलम की चौड़ाई को भर/बढ़ा सकते हैं.

चिप या फ़िल्टर करने वाले यूज़र इंटरफ़ेस (यूआई) का सामान्य उदाहरण:

FlowRow में पांच चिप, जो अगली लाइन में ओवरफ़्लो दिखाते हैं, जब कोई और जगह उपलब्ध नहीं होती. — **पहली इमेज.** `FlowRow` का उदाहरण

बुनियादी इस्तेमाल

FlowRow या FlowColumn का इस्तेमाल करने के लिए, ये कॉम्पोनेस बनाएं और उनमें ऐसे आइटम डालें जो स्टैंडर्ड फ़्लो का पालन करते हों:

@Composable
private fun FlowRowSimpleUsageExample() {
    FlowRow(modifier = Modifier.padding(8.dp)) {
        ChipItem("Price: High to Low")
        ChipItem("Avg rating: 4+")
        ChipItem("Free breakfast")
        ChipItem("Free cancellation")
        ChipItem("£50 pn")
    }
}FlowLayoutSnippets.kt

इस स्निपेट से ऊपर दिखाया गया यूज़र इंटरफ़ेस (यूआई) बनता है. इसमें पहली पंक्ति में जगह न होने पर, आइटम अपने-आप अगली पंक्ति में चले जाते हैं.

फ़्लो लेआउट की सुविधाएं

फ़्लो लेआउट में ये सुविधाएं और प्रॉपर्टी होती हैं. इनका इस्तेमाल करके, अपने ऐप्लिकेशन में अलग-अलग लेआउट बनाए जा सकते हैं.

मुख्य अक्ष का क्रम: हॉरिज़ॉन्टल या वर्टिकल क्रम

मुख्य अक्ष वह अक्ष होता है जिस पर आइटम दिखाए जाते हैं. उदाहरण के लिए, FlowRow में आइटम हॉरिज़ॉन्टल तरीके से व्यवस्थित किए जाते हैं. FlowRow में मौजूद horizontalArrangement पैरामीटर, आइटम के बीच खाली जगह के बंटवारे के तरीके को कंट्रोल करता है.

यहां दी गई टेबल में, FlowRow के लिए आइटम पर horizontalArrangement सेट करने के उदाहरण दिए गए हैं:

हॉरिज़ॉन्टल क्रम, `FlowRow` पर सेट किया गया	नतीजा
`Arrangement.Start` (`Default`)
`Arrangement.SpaceBetween`
`Arrangement.Center`
`Arrangement.End`
`Arrangement.SpaceAround`
`Arrangement.spacedBy(8.dp)`

FlowColumn के लिए, verticalArrangement में मिलते-जुलते विकल्प उपलब्ध हैं. इनमें Arrangement.Top डिफ़ॉल्ट तौर पर सेट होता है.

क्रॉस ऐक्सिस का क्रम

क्रॉस ऐक्सिस, मुख्य ऐक्सिस के विपरीत दिशा में मौजूद ऐक्सिस होता है. उदाहरण के लिए, FlowRow में यह वर्टिकल ऐक्सिस है. कंटेनर में मौजूद सभी कॉन्टेंट को क्रॉस ऐक्सिस में व्यवस्थित करने का तरीका बदलने के लिए, FlowRow के लिए verticalArrangement और FlowColumn के लिए horizontalArrangement का इस्तेमाल करें.

FlowRow के लिए, नीचे दी गई टेबल में आइटम पर अलग-अलग verticalArrangement सेट करने के उदाहरण दिए गए हैं:

वर्टिकल क्रम, `FlowRow` पर सेट है	नतीजा
`Arrangement.Top` (`Default`)
`Arrangement.Bottom`
`Arrangement.Center`

FlowColumn के लिए, horizontalArrangement में मिलते-जुलते विकल्प उपलब्ध हैं. क्रॉस ऐक्सिस का डिफ़ॉल्ट क्रम Arrangement.Start है.

अलग-अलग आइटम का अलाइनमेंट

हो सकता है कि आपको लाइन में अलग-अलग आइटम को अलग-अलग अलाइनमेंट में रखना हो. यह verticalArrangement और horizontalArrangement से अलग है, क्योंकि यह आइटम को मौजूदा लाइन में अलाइन करता है. इसे Modifier.align() के साथ लागू किया जा सकता है.

उदाहरण के लिए, जब किसी FlowRow में मौजूद आइटम की ऊंचाई अलग-अलग होती है, तो पंक्ति सबसे बड़े आइटम की ऊंचाई लेती है और आइटम पर Modifier.align(alignmentOption) लागू करती है:

वर्टिकल अलाइनमेंट, `FlowRow` पर सेट है	नतीजा
`Alignment.Top` (`Default`)
`Alignment.Bottom`
`Alignment.CenterVertically`

FlowColumn के लिए, मिलते-जुलते विकल्प उपलब्ध हैं. डिफ़ॉल्ट अलाइनमेंट Alignment.Start होता है.

पंक्ति या कॉलम में ज़्यादा से ज़्यादा आइटम

पैरामीटर maxItemsInEachRow या maxItemsInEachColumn, मुख्य ऐक्सिस में मौजूद आइटम की संख्या तय करते हैं, ताकि अगली लाइन में जाने से पहले एक लाइन में आइटम दिखाए जा सकें. डिफ़ॉल्ट वैल्यू Int.MAX_INT है. इसमें ज़्यादा से ज़्यादा आइटम जोड़े जा सकते हैं. हालांकि, इसके लिए ज़रूरी है कि आइटम का साइज़, लाइन में फ़िट हो.

उदाहरण के लिए, maxItemsInEachRow सेट करने पर, शुरुआती लेआउट में सिर्फ़ तीन आइटम दिखते हैं:

कोई मैक्स सेट नहीं है	`maxItemsInEachRow = 3`

सामान का वज़न

किसी आइटम का वज़न, उसके फ़ैक्टर और उस लाइन में मौजूद जगह के आधार पर तय होता है जिसमें उसे रखा गया है. अहम बात यह है कि FlowRow और Row के बीच अंतर है. इस अंतर से पता चलता है कि किसी आइटम की चौड़ाई का हिसाब लगाने के लिए, वज़न का इस्तेमाल कैसे किया जाता है. Rows के लिए, वज़न Row में मौजूद सभी आइटम पर आधारित होता है. FlowRow के लिए, वज़न उस लाइन में मौजूद आइटम पर आधारित होता है जिसमें आइटम रखा गया है, न कि FlowRow कंटेनर में मौजूद सभी आइटम पर.

उदाहरण के लिए, अगर आपके पास चार आइटम हैं, जो एक ही लाइन में हैं और जिनका वज़न 1f, 2f, 1f और 3f है, तो कुल वज़न 7f होगा. किसी पंक्ति या कॉलम में बचे हुए स्पेस को 7f से भाग दिया जाएगा. इसके बाद, हर आइटम की चौड़ाई का हिसाब, weight * (remainingSpace / totalWeight) का इस्तेमाल करके लगाया जाएगा.

ग्रिड जैसा लेआउट बनाने के लिए, Modifier.weight और ज़्यादा आइटम के साथ FlowRow या FlowColumn का इस्तेमाल किया जा सकता है. यह तरीका, आपके डिवाइस के साइज़ के हिसाब से अडजस्ट होने वाले रिस्पॉन्सिव लेआउट बनाने के लिए मददगार है.

यहां कुछ उदाहरण दिए गए हैं, जिनसे पता चलता है कि वेट का इस्तेमाल करके क्या-क्या किया जा सकता है. उदाहरण के लिए, ऐसा ग्रिड जिसमें सभी आइटम का साइज़ एक जैसा हो, जैसा कि यहां दिखाया गया है:

फ़्लो लाइन की मदद से बनाया गया ग्रिड — **दूसरी इमेज.** ग्रिड बनाने के लिए `FlowRow` का इस्तेमाल करना

आइटम के बराबर साइज़ का ग्रिड बनाने के लिए, यह तरीका अपनाएं:

val rows = 3
val columns = 3
FlowRow(
    modifier = Modifier.padding(4.dp),
    horizontalArrangement = Arrangement.spacedBy(4.dp),
    maxItemsInEachRow = rows
) {
    val itemModifier = Modifier
        .padding(4.dp)
        .height(80.dp)
        .weight(1f)
        .clip(RoundedCornerShape(8.dp))
        .background(MaterialColors.Blue200)
    repeat(rows * columns) {
        Spacer(modifier = itemModifier)
    }
}FlowLayoutSnippets.kt

अहम जानकारी: अगर कोई दूसरा आइटम जोड़ा जाता है और उसे नौ के बजाय 10 बार दोहराया जाता है, तो आखिरी आइटम पूरे आखिरी कॉलम को ले लेता है, क्योंकि पूरी पंक्ति का कुल वज़न 1f होता है:

ग्रिड पर आखिरी आइटम का पूरा साइज़ — **तीसरी इमेज.** `FlowRow` का इस्तेमाल करके, आखिरी आइटम को पूरी चौड़ाई में दिखाने वाला ग्रिड बनाना

वैल्यू को अन्य Modifiers के साथ जोड़ा जा सकता है, जैसे कि Modifier.width(exactDpAmount), Modifier.aspectRatio(aspectRatio) या Modifier.fillMaxWidth(fraction). ये सभी मॉडिफ़ायर एक साथ काम करते हैं, ताकि FlowRow (या FlowColumn) में मौजूद आइटम का साइज़, डिवाइस के हिसाब से बदल सके.

अलग-अलग साइज़ के आइटम के लिए, वैकल्पिक ग्रिड भी बनाया जा सकता है. इसमें दो आइटम, आधी चौड़ाई लेते हैं और अगले कॉलम में एक आइटम पूरी चौड़ाई लेता है:

फ़्लो लाइन के साथ ग्रिड को वैकल्पिक तौर पर इस्तेमाल करना — **चौथी इमेज.** `FlowRow` पंक्तियों के साइज़ अलग-अलग होने पर

ऐसा करने के लिए, नीचे दिए गए कोड का इस्तेमाल करें:

FlowRow(
    modifier = Modifier.padding(4.dp),
    horizontalArrangement = Arrangement.spacedBy(4.dp),
    maxItemsInEachRow = 2
) {
    val itemModifier = Modifier
        .padding(4.dp)
        .height(80.dp)
        .clip(RoundedCornerShape(8.dp))
        .background(Color.Blue)
    repeat(6) { item ->
        // if the item is the third item, don't use weight modifier, but rather fillMaxWidth
        if ((item + 1) % 3 == 0) {
            Spacer(modifier = itemModifier.fillMaxWidth())
        } else {
            Spacer(modifier = itemModifier.weight(0.5f))
        }
    }
}FlowLayoutSnippets.kt

फ़्रैक्शनल साइज़

Modifier.fillMaxWidth(fraction) का इस्तेमाल करके, उस कंटेनर का साइज़ बताया जा सकता है जिसमें किसी आइटम को रखना है. यह Modifier.fillMaxWidth(fraction) के काम करने के तरीके से अलग है, जब इसे Row या Column पर लागू किया जाता है. इस वजह से, Row/Column आइटम पूरे कंटेनर की चौड़ाई के बजाय, बचे हुए हिस्से का प्रतिशत लेते हैं.

उदाहरण के लिए, नीचे दिए गए कोड में FlowRow के मुकाबले Row का इस्तेमाल करने पर अलग-अलग नतीजे मिलते हैं:

FlowRow(
    modifier = Modifier.padding(4.dp),
    horizontalArrangement = Arrangement.spacedBy(4.dp),
    maxItemsInEachRow = 3
) {
    val itemModifier = Modifier
        .clip(RoundedCornerShape(8.dp))
    Box(
        modifier = itemModifier
            .height(200.dp)
            .width(60.dp)
            .background(Color.Red)
    )
    Box(
        modifier = itemModifier
            .height(200.dp)
            .fillMaxWidth(0.7f)
            .background(Color.Blue)
    )
    Box(
        modifier = itemModifier
            .height(200.dp)
            .weight(1f)
            .background(Color.Magenta)
    )
}FlowLayoutSnippets.kt

`FlowRow`: बीच में मौजूद आइटम, जो पूरे कंटेनर की चौड़ाई का 0.7 हिस्सा है.
`Row`: बीच में मौजूद आइटम, `Row` की बाकी चौड़ाई का 0.7 प्रतिशत ले रहा है.

`fillMaxColumnWidth()` और `fillMaxRowHeight()`

FlowColumn या FlowRow में मौजूद किसी आइटम पर Modifier.fillMaxColumnWidth() या Modifier.fillMaxRowHeight() लागू करने से यह पक्का होता है कि एक ही कॉलम या पंक्ति में मौजूद आइटम, कॉलम/पंक्ति के सबसे बड़े आइटम के बराबर चौड़ाई या ऊंचाई वाले हों.

उदाहरण के लिए, इस उदाहरण में Android डिवाइसों के डिज़र्ट की सूची दिखाने के लिए, FlowColumn का इस्तेमाल किया गया है. आइटम पर Modifier.fillMaxColumnWidth() लागू होने और न होने पर, हर आइटम की चौड़ाई में अंतर देखा जा सकता है. साथ ही, आइटम के रैप होने पर भी यह अंतर देखा जा सकता है.

FlowColumn(
    Modifier
        .padding(20.dp)
        .fillMaxHeight()
        .fillMaxWidth(),
    horizontalArrangement = Arrangement.spacedBy(8.dp),
    verticalArrangement = Arrangement.spacedBy(8.dp),
    maxItemsInEachColumn = 5,
) {
    repeat(listDesserts.size) {
        Box(
            Modifier
                .fillMaxColumnWidth()
                .border(1.dp, Color.DarkGray, RoundedCornerShape(8.dp))
                .padding(8.dp)
        ) {

            Text(
                text = listDesserts[it],
                fontSize = 18.sp,
                modifier = Modifier.padding(3.dp)
            )
        }
    }
}FlowLayoutSnippets.kt

`Modifier.fillMaxColumnWidth()` को हर आइटम पर लागू किया गया
चौड़ाई में कोई बदलाव नहीं किया गया (आइटम को रैप करना)