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") } }
यह स्निपेट ऊपर दिखाए गए यूज़र इंटरफ़ेस (यूआई) में खुलता है, जिसमें आइटम अपने-आप यहां जाते हैं अगली पंक्ति तब दिखाई देगी जब पहली पंक्ति में ज़्यादा जगह नहीं होगी.
फ़्लो लेआउट की सुविधाएं
फ़्लो लेआउट में नीचे दी गई सुविधाएं और प्रॉपर्टी होती हैं, जिनका इस्तेमाल करके अपने ऐप्लिकेशन में अलग-अलग लेआउट बनाएं.
मुख्य अक्ष व्यवस्था: क्षैतिज या लंबवत व्यवस्था
मुख्य ऐक्सिस वह ऐक्सिस है जिस पर आइटम रखे जाते हैं (उदाहरण के लिए,
FlowRow
, आइटम को हॉरिज़ॉन्टल तौर पर क्रम में लगाया गया है). horizontalArrangement
FlowRow
में पैरामीटर की मदद से, आइटम के बीच खाली जगह को बांटने के तरीके को कंट्रोल किया जाता है.
यहां दी गई टेबल में, आइटम पर horizontalArrangement
सेट करने के उदाहरण दिखाए गए हैं
FlowRow
के लिए:
|
नतीजा |
|
|
FlowColumn
के लिए, इसी तरह के विकल्प verticalArrangement
के साथ उपलब्ध हैं. इनमें
Arrangement.Top
की डिफ़ॉल्ट वैल्यू.
क्रॉस-ऐक्सिस अरेंजमेंट
क्रॉस ऐक्सिस, मुख्य ऐक्सिस की उलट दिशा में होता है. इसके लिए
उदाहरण के लिए, FlowRow
में यह वर्टिकल ऐक्सिस है. विज्ञापन की रणनीति को बेहतर बनाने के लिए,
कंटेनर के अंदर मौजूद कॉन्टेंट को क्रॉस ऐक्सिस में रखा जाता है, ताकि
FlowRow
के लिए verticalArrangement
और horizontalArrangement
के लिए
FlowColumn
.
नीचे दी गई टेबल में, FlowRow
के लिए अलग-अलग सेटिंग के उदाहरण दिए गए हैं
आइटम को verticalArrangement
:
|
नतीजा |
|
|
FlowColumn
के लिए, horizontalArrangement
पर मिलते-जुलते विकल्प उपलब्ध हैं.
डिफ़ॉल्ट क्रॉस ऐक्सिस व्यवस्था Arrangement.Start
है.
अलग-अलग आइटम का अलाइनमेंट
हो सकता है कि आप पंक्ति में अलग-अलग आइटम
अलाइनमेंट. यह वैल्यू, verticalArrangement
और
horizontalArrangement
, क्योंकि यह आइटम को मौजूदा लाइन के अंदर अलाइन करता है. आप
इसे Modifier.align()
के साथ लागू करें.
उदाहरण के लिए, जब FlowRow
में मौजूद आइटम की ऊंचाई अलग-अलग होती है, तो पंक्ति
सबसे बड़े आइटम की ऊंचाई और Modifier.align(alignmentOption)
को इस पर लागू करता है:
आइटम:
|
नतीजा |
|
|
FlowColumn
के लिए, मिलते-जुलते विकल्प उपलब्ध हैं. डिफ़ॉल्ट अलाइनमेंट यह है
Alignment.Start
.
पंक्ति या कॉलम में ज़्यादा से ज़्यादा आइटम
पैरामीटर maxItemsInEachRow
या maxItemsInEachColumn
ज़्यादा से ज़्यादा पैरामीटर के बारे में बताते हैं
मुख्य ऐक्सिस में मौजूद आइटम को, अगली लाइन में रैप करने से पहले, एक लाइन में अनुमति दें. कॉन्टेंट बनाने
Int.MAX_INT
डिफ़ॉल्ट है, जो ज़्यादा से ज़्यादा आइटम की अनुमति देता है
उनका साइज़, उन्हें लाइन में फ़िट होने में मदद करता है.
उदाहरण के लिए, maxItemsInEachRow
सेट करने से शुरुआती लेआउट को सिर्फ़
तीन आइटम हैं:
कोई मैक्सिमम सेट नहीं है |
|
लेज़ी लोडिंग फ़्लो आइटम
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") }
आइटम का वज़न
किसी आइटम का वज़न, उसके फ़ैक्टर और लाइन में मौजूद जगह के आधार पर बढ़ता है
को अंदर रखा गया. अहम बात यह है कि 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) } }
अहम बात यह है कि अगर आप कोई दूसरा आइटम जोड़ते हैं और उसे 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)) } } }
अलग-अलग साइज़
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)) }
|
|
|
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) ) } } }
|
|
चौड़ाई में कोई बदलाव सेट नहीं है (रैपिंग आइटम) |
आपके लिए सुझाव
- ध्यान दें: JavaScript बंद होने पर लिंक टेक्स्ट दिखता है
- लेआउट की बुनियादी बातें लिखना
- Compose में ConstraintLayout
- एडिटर की कार्रवाइयां {:#संपादक-action}