Compose में, कई मॉडिफ़ायर को एक साथ जोड़ा जा सकता है, ताकि किसी कॉम्पोज़ेबल के लुक और स्टाइल में बदलाव किया जा सके. इन मॉडिफ़ायर चेन से, कॉम्पोज़ेबल के लिए पास की गई सीमाओं पर असर पड़ सकता है. ये सीमाएं चौड़ाई और ऊंचाई के बाउंड तय करती हैं.
इस पेज पर बताया गया है कि चेन किए गए मॉडिफ़ायर, पाबंदियों पर कैसे असर डालते हैं. साथ ही, इनसे कॉम्पोज़ेबल के मेज़रमेंट और प्लेसमेंट पर भी असर पड़ता है.
यूज़र इंटरफ़ेस ट्री में मॉडिफ़ायर
यह समझने के लिए कि मॉडिफ़ायर एक-दूसरे पर कैसे असर डालते हैं, यह देखना मददगार होता है कि वे यूज़र इंटरफ़ेस (यूआई) ट्री में कैसे दिखते हैं. यह ट्री, कॉम्पोज़िशन के दौरान जनरेट होता है. ज़्यादा जानकारी के लिए, कॉम्पोज़िशन सेक्शन देखें.
यूज़र इंटरफ़ेस (यूआई) ट्री में, लेआउट नोड के लिए, मॉडिफ़ायर को रैपर नोड के तौर पर विज़ुअलाइज़ किया जा सकता है:
किसी कंपोज़ेबल में एक से ज़्यादा मॉडिफ़ायर जोड़ने से, मॉडिफ़ायर की एक चेन बन जाती है. टास्क कब शुरू होगा
अगर कई मॉडिफ़ायर की चेन डाली जाती है, तो हर मॉडिफ़ायर नोड बाकी चेन को रैप कर देता है
और उसके अंदर का लेआउट नोड भी दिखेगा. उदाहरण के लिए, clip और किसी
size मॉडिफ़ायर, clip मॉडिफ़ायर नोड, size मॉडिफ़ायर नोड को रैप करता है,
जो फिर Image लेआउट नोड को रैप कर देता है.
लेआउट फ़ेज़ में, ट्री वॉक करने वाला एल्गोरिदम एक जैसा ही रहता है, लेकिन हर मॉडिफ़ायर नोड पर भी विज़िट किया जाता है. इस तरह, कोई मॉडिफ़ायर, उस मॉडिफ़ायर या लेआउट नोड के साइज़ की ज़रूरतों और उसकी जगह को बदल सकता है जिसे वह रैप करता है.
जैसा कि दूसरी इमेज में दिखाया गया है, Image और Text कंपोज़ेबल को लागू करना
जिसमें सिंगल लेआउट नोड को रैप करने वाले मॉडिफ़ायर की चेन शामिल होती है. Row और Column को लागू करने का तरीका, लेआउट नोड की तरह ही होता है. इनसे यह पता चलता है कि उनके चाइल्ड को कैसे लेआउट करना है.
खास जानकारी:
- मॉडिफ़ायर, एक मॉडिफ़ायर या लेआउट नोड को रैप करते हैं.
- लेआउट नोड कई चाइल्ड नोड को लेआउट कर सकते हैं.
नीचे दिए सेक्शन में बताया गया है कि मानसिक मॉडल का इस्तेमाल किस तरह किया जाए मॉडिफ़ायर की चेन बनाना और कंपोज़ेबल के साइज़ पर इसका असर.
लेआउट फ़ेज़ में कंस्ट्रेंट
लेआउट फ़ेज़, हर लेआउट नोड की चौड़ाई, ऊंचाई, और x, y निर्देशांक का पता लगाने के लिए, तीन चरणों वाले एल्गोरिदम का इस्तेमाल करता है:
- बच्चों को मेज़र करना: कोई नोड, अपने बच्चों को मेज़र करता है.
- अपने हिसाब से साइज़ तय करना: उन मेज़रमेंट के आधार पर, नोड अपने-आप तय करता है साइज़.
- प्लेस चिल्ड्रन (बच्चे की जगह): हर चाइल्ड नोड को नोड के पैमाने पर रखा जाता है स्थिति.
Constraints एल्गोरिदम के पहले दो चरणों के दौरान, नोड के लिए सही साइज़ ढूंढने में मदद करते हैं. कंस्ट्रेंट किसी
नोड की चौड़ाई और ऊंचाई के साथ काम करता है. जब नोड अपने साइज़ के बारे में तय करता है, तो उसका मेज़र किया गया साइज़
इस साइज़ की रेंज में आना चाहिए.
कंस्ट्रेंट के टाइप
कंस्ट्रेंट इनमें से कोई एक हो सकता है:
- सीमा के साथ: नोड की चौड़ाई और ऊंचाई की एक तय सीमा होती है.
- बिना किसी सीमा के: इस नोड का साइज़ तय नहीं होता. ज़्यादा से ज़्यादा चौड़ाई और ऊंचाई की सीमाएं अनंत पर सेट हैं.
- एग्ज़ैक्ट: नोड से, साइज़ की सटीक ज़रूरी शर्त को पूरा करने के लिए कहा जाता है. कम से कम और ज़्यादा से ज़्यादा सीमाएं एक ही वैल्यू पर सेट की गई हैं.
- कॉम्बिनेशन: यह नोड, ऊपर बताई गई पाबंदियों के कॉम्बिनेशन का पालन करता है. उदाहरण के लिए, कोई कंस्ट्रेंट अनबाउंडेड ज़्यादा से ज़्यादा ऊंचाई या सटीक चौड़ाई सेट करें, लेकिन सीमित ऊंचाई दें.
अगले सेक्शन में बताया गया है कि ये पाबंदियां, माता-पिता से बच्चे पर कैसे लागू होती हैं.
माता-पिता से बच्चे को शर्तें कैसे पास की जाती हैं
लेआउट फ़ेज़ में कंस्ट्रेंट में बताए गए एल्गोरिदम के पहले चरण के दौरान, यूज़र इंटरफ़ेस (यूआई) ट्री में कंस्ट्रेंट, पैरंट से चाइल्ड पर पास किए जाते हैं.
जब पैरंट नोड अपने बच्चों को मापता है, तो यह हर उपयोगकर्ता के लिए ये कंस्ट्रेंट उपलब्ध कराता है ताकि उन्हें यह बताया जा सके कि वे कितने बड़े या छोटे हो सकते हैं. इसके बाद, जब वह अपने साइज़ का फ़ैसला करता है, तो वह उन सीमाओं का भी पालन करता है जिन्हें उसके पैरंट ने तय किया था.
बड़े लेवल पर, एल्गोरिदम इस तरह से काम करता है:
- यूज़र इंटरफ़ेस (यूआई) ट्री में रूट नोड, अपने चाइल्ड नोड का साइज़ तय करने के लिए, उनका आकलन करता है. साथ ही, उसी साइज़ की शर्तों को अपने पहले चाइल्ड नोड को भेजता है.
- अगर चाइल्ड कोई ऐसा मॉडिफ़ायर है जिसका मेज़रमेंट पर असर नहीं पड़ता है, तो वह अगले मॉडिफ़ायर को सीमाएं भेजता है. जब तक मेज़रमेंट पर असर डालने वाले मॉडिफ़ायर तक नहीं पहुंचा जाता, तब तक पाबंदियों को मॉडिफ़ायर चेन में वैसे ही पास किया जाता है. इसके बाद, सीमाओं का साइज़ फिर से तय कर दिया जाता है.
- नोड तक पहुंचने के बाद, जिसमें कोई चाइल्ड नहीं होता (जिसे "लीफ़" कहा जाता है) नोड"), उसका साइज़, पास किए गए कंस्ट्रेंट के आधार पर तय करता है और इस रिज़ॉल्व किए गए साइज़ को इसकी पैरंट वैल्यू दिखाता है.
- माता-पिता, इस बच्चे के मेज़रमेंट के आधार पर अपनी पाबंदियों में बदलाव करते हैं और इन बदली हुई पाबंदियों के साथ अपने अगले बच्चे को बुलाते हैं.
- पैरंट के सभी चाइल्ड एंट्री को मेज़र करने के बाद, पैरंट नोड और इस बारे में अपने माता-पिता को बताती है.
- इस तरह, पूरे ट्री को डीप-फ़र्स्ट ट्रैवर्स किया जाता है. आखिर में, सभी नोड के साइज़ तय हो जाते हैं और मेज़रमेंट का चरण पूरा हो जाता है.
बेहतर उदाहरण के लिए, कंस्ट्रेंट और मॉडिफ़ायर का क्रम देखें वीडियो.
कंस्ट्रेंट पर असर डालने वाले मॉडिफ़ायर
आपको पिछले सेक्शन में पता चला था कि कुछ मॉडिफ़ायर कंस्ट्रेंट पर असर डाल सकते हैं साइज़. इन सेक्शन में, कार्रवाई बदलने वाले उन खास बदलावों के बारे में बताया गया है जो कीवर्ड पर असर डालते हैं करना है.
size मॉडिफ़ायर
size मॉडिफ़ायर, कॉन्टेंट के पसंदीदा साइज़ के बारे में बताता है.
उदाहरण के लिए, नीचे दिया गया यूज़र इंटरफ़ेस (यूआई) ट्री, 300dp के कंटेनर में 200dp के हिसाब से रेंडर किया जाना चाहिए. सीमाएं तय की गई हैं. इनके मुताबिक, चौड़ाई 100dp से
300dp और ऊंचाई 100dp से 200dp के बीच होनी चाहिए:
size मॉडिफ़ायर, इनकमिंग कंस्ट्रेंट के हिसाब से बदलाव करता है, ताकि उसे पास की गई वैल्यू से मैच किया जा सके.
इस उदाहरण में, वैल्यू 150dp है:
size मॉडिफ़ायर, पाबंदियों को 150dp में बदल रहा है.अगर चौड़ाई और ऊंचाई, सबसे छोटे कंस्ट्रेंट बाउंड से कम या सबसे बड़े कंस्ट्रेंट बाउंड से ज़्यादा है, तो मॉडिफ़ायर, पास की गई सीमाओं के मुताबिक काम करता है. हालांकि, यह इन सीमाओं का पालन करता है:
size मॉडिफ़ायर, पास किए गए कंस्ट्रेंट का उतना ही करीब से पालन करता है
जितना हो सके उतना बेहतर है.ध्यान दें कि एक से ज़्यादा size मॉडिफ़ायर को चेन में जोड़ने पर, यह काम नहीं करता. पहला size
मॉडिफ़ायर, कम से कम और ज़्यादा से ज़्यादा सीमा, दोनों को एक तय वैल्यू पर सेट करता है. भले ही
दूसरा आकार संशोधक छोटे या बड़े आकार का अनुरोध करता है, लेकिन उसे अभी भी
पास दी गई सटीक सीमाओं का पालन करना चाहिए, इसलिए यह उन वैल्यू को नहीं बदलेगा:
size मॉडिफ़ायर की चेन, जिसमें दूसरी वैल्यू पास हुई
(50dp) में, पहली वैल्यू (100dp) को नहीं बदलता.requiredSize मॉडिफ़ायर
अगर आपको अपने नोड को इनकमिंग कंस्ट्रेंट को बदलना है, तो size के बजाय requiredSize मॉडिफ़ायर का इस्तेमाल करें. requiredSize मॉडिफ़ायर, आने वाली सीमाओं को बदल देता है और आपके तय किए गए साइज़ को सटीक सीमाओं के तौर पर पास करता है.
जब साइज़ को ट्री में वापस पास कर दिया जाता है, तो चाइल्ड नोड उपलब्ध स्थान:
requiredSize मॉडिफ़ायर से आने वाले कंस्ट्रेंट को ओवरराइड कर रहा है
size मॉडिफ़ायर.width और height मॉडिफ़ायर
size मॉडिफ़ायर, कंस्ट्रेंट की चौड़ाई और ऊंचाई, दोनों को अपना लेता है. के साथ
width मॉडिफ़ायर के साथ, आप एक तय चौड़ाई सेट कर सकते हैं, लेकिन ऊंचाई तय न कर सकते हैं.
इसी तरह, height मॉडिफ़ायर के साथ, आप एक तय ऊंचाई सेट कर सकते हैं, लेकिन आप
चौड़ाई तय नहीं की:
width मॉडिफ़ायर और height मॉडिफ़ायर, तय चौड़ाई और ऊंचाई सेट करते हैं.sizeIn मॉडिफ़ायर
sizeIn मॉडिफ़ायर की मदद से, चौड़ाई और ऊंचाई के लिए कम से कम और ज़्यादा से ज़्यादा सीमा तय की जा सकती है. अगर आपको ज़्यादा कंट्रोल की ज़रूरत है, तो sizeIn मॉडिफ़ायर का इस्तेमाल करें
पर निर्भर करता है.
sizeIn मॉडिफ़ायर, जिसमें minWidth, maxWidth, minHeight, और
maxHeight सेट हैं.उदाहरण
इस सेक्शन में, चेन किए गए मॉडिफ़ायर वाले कई कोड स्निपेट के आउटपुट को दिखाया गया है और उनके बारे में जानकारी दी गई है.
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .fillMaxSize() .size(50.dp) )
इस स्निपेट से यह आउटपुट मिलता है:
fillMaxSizeमॉडिफ़ायर, दोनों को सेट करने के लिए कंस्ट्रेंट को बदल देता है कम से कम चौड़ाई और ऊंचाई और सबसे ज़्यादा वैल्यू तक — चौड़ाई में300dpऔर200dpलंबाई.- भले ही,
sizeमॉडिफ़ायर को50dpसाइज़ का इस्तेमाल करना हो, फिर भी उसे कम से कम तय की गई सीमाओं का पालन करना होगा. इस तरह,sizeमॉडिफ़ायर साथ ही,200तक300की सटीक कंस्ट्रेंट बाउंड का आउटपुट, असरदार तरीके से देता हैsizeमॉडिफ़ायर में दी गई वैल्यू को अनदेखा कर दिया जाता है. Imageइन सीमाओं का पालन करता है और200गुणा300का साइज़ रिपोर्ट करता है, जो कि को पेड़ तक ले जाया जाता है.
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) )
यह स्निपेट यह आउटपुट देता है:
fillMaxSizeमॉडिफ़ायर, कम से कम चौड़ाई और ऊंचाई, दोनों को ज़्यादा से ज़्यादा वैल्यू पर सेट करने के लिए, सीमाओं में बदलाव करता है — चौड़ाई में300dpऔर ऊंचाई में200dp.wrapContentSizeमॉडिफ़ायर, कम से कम पाबंदियों को रीसेट करता है. इसलिए,fillMaxSizeकी वजह से, कंस्ट्रेंट ठीक हो गया है.wrapContentSizeइसे वापस रीसेट कर देता है सीमित मामलों में. यह नोड अब पूरा स्पेस ले सकता है फिर से या पूरे स्पेस से छोटा होना चाहिए.sizeसंशोधक, कंस्ट्रेंट को की कम से कम और ज़्यादा से ज़्यादा सीमाओं पर सेट करता है50.Imageका साइज़50गुणा50है. साथ ही,sizeमॉडिफ़ायर उसे फ़ॉरवर्ड कर देता है.wrapContentSizeमॉडिफ़ायर में एक खास प्रॉपर्टी है. यह अपने चाइल्ड को, उपलब्ध कम से कम सीमाओं के बीच में रखता है. इसलिए, यह अपने पैरंट को उतना ही साइज़ दिखाता है जितना कम से कम साइज़ उसे पास किया गया था.
सिर्फ़ तीन मॉडिफ़ायर को मिलाकर, कंपोज़ेबल का साइज़ तय किया जा सकता है और उसके बीच में रहें.
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .clip(CircleShape) .padding(10.dp) .size(100.dp) )
यह स्निपेट यह आउटपुट देता है:
clipमॉडिफ़ायर से पाबंदियों में कोई बदलाव नहीं होता.paddingमॉडिफ़ायर, ज़्यादा से ज़्यादा पाबंदियों को कम करता है.sizeमॉडिफ़ायर, सभी कंस्ट्रेंट को100dpपर सेट करता है.Imageउन सीमाओं का पालन करता है और100dpके हिसाब से100का साइज़ रिपोर्ट करता है.paddingमॉडिफ़ायर, सभी साइज़ पर10dpजोड़ता है. इससे, रिपोर्ट की चौड़ाई और ऊंचाई20dpतक बढ़ जाती है.- अब ड्रॉइंग के फ़ेज़ में,
clipमॉडिफ़ायर,120के कैनवस पर120dpके ज़रिए काम करता है. इसलिए, यह उस साइज़ का सर्कल मास्क बनाता है. - इसके बाद,
paddingमॉडिफ़ायर सभी साइज़ के लिए कॉन्टेंट को10dpसे सेट कर देता है. इसलिए, यह कैनवस के साइज़ को कम करके100पर100dpकर देता है. Imageउस कैनवस में बनाया गया है. इमेज इस आधार पर क्लिप की गई है कि120dpका मूल सर्कल, इसलिए आउटपुट एक नॉन-राउंड नतीजा है.