Compose में फ़्लो लेआउट

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

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

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

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, आइटम को हॉरिज़ॉन्टल तौर पर क्रम में लगाया गया है). horizontalArrangement FlowRow में पैरामीटर की मदद से, आइटम के बीच खाली जगह को बांटने के तरीके को कंट्रोल किया जाता है.

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

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

FlowColumn के लिए, इसी तरह के विकल्प verticalArrangement के साथ उपलब्ध हैं. इनमें Arrangement.Top की डिफ़ॉल्ट वैल्यू.

क्रॉस-ऐक्सिस अरेंजमेंट

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

नीचे दी गई टेबल में, 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

लेज़ी लोडिंग फ़्लो आइटम

ContextualFlowRow और ContextualFlowColumn FlowRow और FlowColumn का वर्शन. ये कॉन्टेंट को लेज़ी लोड करने में आपकी मदद करते हैं पंक्ति या कॉलम में रखें. वे आइटम की स्थिति की जानकारी भी देते हैं (इंडेक्स, लाइन की संख्या, और उपलब्ध साइज़), जैसे कि अगर आइटम पहले लाइन. यह बड़े डेटा-सेट के लिए और काम की जानकारी की ज़रूरत होने पर काम आता है किसी आइटम के बारे में जानकारी.

maxLines पैरामीटर, दिखाई जाने वाली पंक्तियों की संख्या को सीमित करता है और overflow पैरामीटर से पता चलता है कि आइटम का ओवरफ़्लो होने पर क्या दिखाया जाना चाहिए पहुंच गया है, जिससे आप एक कस्टम expandIndicator दर्ज कर सकते है या collapseIndicator.

उदाहरण के लिए, "+ (बचे हुए आइटम की संख्या)" दिखाने के लिए या "कम दिखाएं" बटन:

val totalCount = 40
var maxLines by remember {
    mutableStateOf(2)
}

val moreOrCollapseIndicator = @Composable { scope: ContextualFlowRowOverflowScope ->
    val remainingItems = totalCount - scope.shownItemCount
    ChipItem(if (remainingItems == 0) "Less" else "+$remainingItems", onClick = {
        if (remainingItems == 0) {
            maxLines = 2
        } else {
            maxLines += 5
        }
    })
}
ContextualFlowRow(
    modifier = Modifier
        .safeDrawingPadding()
        .fillMaxWidth(1f)
        .padding(16.dp)
        .wrapContentHeight(align = Alignment.Top)
        .verticalScroll(rememberScrollState()),
    verticalArrangement = Arrangement.spacedBy(4.dp),
    horizontalArrangement = Arrangement.spacedBy(8.dp),
    maxLines = maxLines,
    overflow = ContextualFlowRowOverflow.expandOrCollapseIndicator(
        minRowsToShowCollapse = 4,
        expandIndicator = moreOrCollapseIndicator,
        collapseIndicator = moreOrCollapseIndicator
    ),
    itemCount = totalCount
) { index ->
    ChipItem("Item $index")
}
FlowLayoutSnippets.kt

आइटम का वज़न

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

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

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

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

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

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

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

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

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

इस कोड का इस्तेमाल करके ऐसा किया जा सकता है:

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()

Modifier.fillMaxColumnWidth() को लागू किया जा रहा है या FlowColumn या FlowRow में मौजूद किसी आइटम पर 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() हर आइटम पर लागू किया गया
चौड़ाई में कोई बदलाव सेट नहीं है (रैपिंग आइटम)

आपके लिए सुझाव

• ध्यान दें: JavaScript बंद होने पर लिंक टेक्स्ट दिखता है
• लेआउट की बुनियादी बातें लिखना
• Compose में ConstraintLayout
• एडिटर की कार्रवाइयां {:#संपादक-action}