कंस्ट्रेंट और मॉडिफ़ायर ऑर्डर

Compose में, कई मॉडिफ़ायर को एक साथ चेन करके रखा जा सकता है. इससे लुक में बदलाव किया जा सकता है और जुड़ाव महसूस होता है. ये मॉडिफ़ायर की चेन, पास की गई सीमाओं पर असर डाल सकती हैं कंपोज़ेबल में उपलब्ध है, जो चौड़ाई और ऊंचाई की सीमाओं को तय करता है.

इस पेज में बताया गया है कि चेन मॉडिफ़ायर, कंस्ट्रेंट पर कैसे असर डालते हैं और कैसे कंपोज़ेबल का मेज़रमेंट और प्लेसमेंट.

यूज़र इंटरफ़ेस ट्री में मॉडिफ़ायर

यह समझने के लिए कि मॉडिफ़ायर एक-दूसरे पर कैसे असर डालते हैं, यह देखना मददगार होगा कि वे यूज़र इंटरफ़ेस ट्री में दिखते हैं, जो कंपोज़िशन के दौरान जनरेट होता है. इसके लिए ज़्यादा जानकारी के लिए, कंपोज़िशन सेक्शन देखें.

यूज़र इंटरफ़ेस ट्री में, लेआउट के लिए रैपर नोड के तौर पर मॉडिफ़ायर को विज़ुअलाइज़ किया जा सकता है नोड:

किसी कंपोज़ेबल में एक से ज़्यादा मॉडिफ़ायर जोड़ने से, मॉडिफ़ायर की एक चेन बन जाती है. टास्क कब शुरू होगा अगर कई मॉडिफ़ायर की चेन डाली जाती है, तो हर मॉडिफ़ायर नोड बाकी चेन को रैप कर देता है और उसके अंदर का लेआउट नोड भी दिखेगा. उदाहरण के लिए, clip और किसी size मॉडिफ़ायर, clip मॉडिफ़ायर नोड, size मॉडिफ़ायर नोड को रैप करता है, जो फिर Image लेआउट नोड को रैप कर देता है.

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

जैसा कि दूसरी इमेज में दिखाया गया है, Image और Text कंपोज़ेबल को लागू करना जिसमें सिंगल लेआउट नोड को रैप करने वाले मॉडिफ़ायर की चेन शामिल होती है. कॉन्टेंट बनाने Row और Column को लागू करना बस लेआउट नोड होते हैं. इनसे पता चलता है कि कम समय में ज़्यादा काम करना पड़ता है.

खास जानकारी:

• मॉडिफ़ायर, एक मॉडिफ़ायर या लेआउट नोड को रैप करते हैं.
• लेआउट नोड कई चाइल्ड नोड को लेआउट कर सकते हैं.

नीचे दिए सेक्शन में बताया गया है कि मानसिक मॉडल का इस्तेमाल किस तरह किया जाए मॉडिफ़ायर की चेन बनाना और कंपोज़ेबल के साइज़ पर इसका असर.

लेआउट फ़ेज़ में कंस्ट्रेंट

लेआउट फ़ेज़, तीन चरणों वाले एल्गोरिदम का इस्तेमाल करके हर लेआउट का पता लगाता है नोड की चौड़ाई, ऊंचाई, और x, y निर्देशांक:

1. बच्चों को मापें: अगर कोई नोड अपने चिल्ड्रन (बच्चों का डेटा) को मापता है, तो उसे मापता है.
2. अपने हिसाब से साइज़ तय करना: उन मेज़रमेंट के आधार पर, नोड अपने-आप तय करता है साइज़.
3. प्लेस चिल्ड्रन (बच्चे की जगह): हर चाइल्ड नोड को नोड के पैमाने पर रखा जाता है स्थिति.

Constraints की मदद से, पहले दो नोड के लिए सही साइज़ का पता लगाया जा सकता है एल्गोरिदम के चरण देखें. कंस्ट्रेंट किसी नोड की चौड़ाई और ऊंचाई के साथ काम करता है. जब नोड अपने साइज़ के बारे में तय करता है, तो उसका मेज़र किया गया साइज़ इस साइज़ की रेंज में आना चाहिए.

कंस्ट्रेंट के टाइप

कंस्ट्रेंट इनमें से कोई एक हो सकता है:

• बाउंडेड: नोड में ज़्यादा से ज़्यादा और कम से कम चौड़ाई और ऊंचाई मौजूद है.

• अनबाउंड किया गया: नोड किसी भी साइज़ तक सीमित नहीं है. ज़्यादा से ज़्यादा चौड़ाई और ऊंचाई की सीमाएं अनंत पर सेट हैं.

• सटीक: नोड को साइज़ की ज़रूरी शर्त को पूरा करने के लिए कहा जाता है. सबसे कम और अधिकतम सीमाओं को एक ही मान पर सेट किया गया हो.

• कॉम्बिनेशन: नोड ऊपर दिए गए कंस्ट्रेंट टाइप के कॉम्बिनेशन को फ़ॉलो करता है. उदाहरण के लिए, कोई कंस्ट्रेंट अनबाउंडेड ज़्यादा से ज़्यादा ऊंचाई या सटीक चौड़ाई सेट करें, लेकिन सीमित ऊंचाई दें.

अगला सेक्शन बताता है कि इन शर्तों को, पैरंट से बच्चा.

माता-पिता से बच्चे को शर्तें कैसे पास की जाती हैं

लेआउट में सीमाएं फ़ेज़ में, कंस्ट्रेंट को पैरंट से बच्चे को पास कर दिया जाता है पर क्लिक करें.

जब पैरंट नोड अपने बच्चों को मापता है, तो यह हर उपयोगकर्ता के लिए ये कंस्ट्रेंट उपलब्ध कराता है ताकि उन्हें यह बताया जा सके कि वे कितने बड़े या छोटे हो सकते हैं. इसके बाद, जब अपने हिसाब से साइज़ तय करता है. साथ ही, यह उन पाबंदियों का भी पालन करता है जो अपने माता-पिता हैं.

बड़े लेवल पर, एल्गोरिदम इस तरह से काम करता है:

1. यूज़र इंटरफ़ेस (यूआई) ट्री में रूट नोड का इस्तेमाल करके यह तय करें कि इसे असल में कितनी जगह इस्तेमाल करना है अपने बच्चों को मापता है और इन पाबंदियों को अपने पहले बच्चे पर भेजता है.
2. अगर बच्चा कोई ऐसा मॉडिफ़ायर है जो मेज़रमेंट पर असर नहीं डालता, तो यह पाबंदियों को अगले मॉडिफ़ायर पर सेट करना. कंस्ट्रेंट को मॉडिफ़ायर से नीचे कर दिया जाता है जब तक मेज़रमेंट पर असर डालने वाले मॉडिफ़ायर न मिल जाए, तब तक चेन टैक-अप नहीं होती है. कॉन्टेंट बनाने इसके बाद, कंस्ट्रेंट का साइज़ फिर से बदल दिया जाता है.
3. उस नोड तक पहुंचने के बाद जिसमें कोई चाइल्ड नहीं होता (जिसे "लीफ़" कहा जाता है) नोड"), उसका साइज़, पास किए गए कंस्ट्रेंट के आधार पर तय करता है और इस रिज़ॉल्व किए गए साइज़ को इसकी पैरंट वैल्यू दिखाता है.
4. माता-पिता इस बच्चे के माप के आधार पर अपनी पाबंदियां बदल लेते हैं और इन अडजस्ट की गई पाबंदियों के साथ अपने अगले बच्चे को कॉल करता है.
5. पैरंट के सभी चाइल्ड एंट्री को मेज़र करने के बाद, पैरंट नोड और इस बारे में अपने माता-पिता को बताती है.
6. इस तरह, पूरे पेड़ की गहराई का पता लगाया जाता है. आखिर में, सभी नोड ने उनके आकार तय कर लिए हैं और मापन चरण पूरा हो गया.

बेहतर उदाहरण के लिए, कंस्ट्रेंट और मॉडिफ़ायर का क्रम देखें वीडियो.

कंस्ट्रेंट पर असर डालने वाले मॉडिफ़ायर

आपको पिछले सेक्शन में पता चला था कि कुछ मॉडिफ़ायर कंस्ट्रेंट पर असर डाल सकते हैं साइज़. इन सेक्शन में, कार्रवाई बदलने वाले उन खास बदलावों के बारे में बताया गया है जो कीवर्ड पर असर डालते हैं करना है.

size मॉडिफ़ायर

size मॉडिफ़ायर, कॉन्टेंट के पसंदीदा साइज़ के बारे में बताता है.

उदाहरण के लिए, नीचे दिए गए यूज़र इंटरफ़ेस (यूआई) ट्री को 300dp के कंटेनर में रेंडर किया जाना चाहिए 200dp ने. कंस्ट्रेंट बाउंड है, जिससे 100dp और के बीच चौड़ाई मिल सकती है 300dp, और 100dp और 200dp के बीच ऊंचाई:

size मॉडिफ़ायर, इनकमिंग कंस्ट्रेंट के हिसाब से बदलाव करता है, ताकि उसे पास की गई वैल्यू से मैच किया जा सके. इस उदाहरण में, वैल्यू 150dp है:

अगर चौड़ाई और ऊंचाई, सबसे छोटी कंस्ट्रेंट बाउंड से कम है, या सबसे बड़ी कंस्ट्रेंट बाउंड से बड़ा होता है, तो मॉडिफ़ायर पास किए गए कॉन्स्ट्रेंट से मेल खाता है जितनी हो सके उतनी करीब से इसमें:

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

requiredSize मॉडिफ़ायर

अगर आपको चाहिए, तो size के बजाय requiredSize मॉडिफ़ायर का इस्तेमाल करें नोड का इस्तेमाल किया जा सकता है. requiredSize मॉडिफ़ायर और आपके तय किए गए साइज़ को, सटीक सीमाओं के तौर पर पास करता है.

जब साइज़ को ट्री में वापस पास कर दिया जाता है, तो चाइल्ड नोड उपलब्ध स्थान:

width और height मॉडिफ़ायर

size मॉडिफ़ायर, कंस्ट्रेंट की चौड़ाई और ऊंचाई, दोनों को अपना लेता है. के साथ width मॉडिफ़ायर के साथ, आप एक तय चौड़ाई सेट कर सकते हैं, लेकिन ऊंचाई तय न कर सकते हैं. इसी तरह, height मॉडिफ़ायर के साथ, आप एक तय ऊंचाई सेट कर सकते हैं, लेकिन आप चौड़ाई तय नहीं की:

sizeIn मॉडिफ़ायर

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

उदाहरण

यह सेक्शन, चेन वाले मॉडिफ़ायर.

Image(
    painterResource(R.drawable.hero),
    contentDescription = null,
    Modifier
        .fillMaxSize()
        .size(50.dp)
)
ConstraintsModifiersSnippets.kt

यह स्निपेट यह आउटपुट देता है:

• 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)
)
ConstraintsModifiersSnippets.kt

यह स्निपेट यह आउटपुट देता है:

• 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)
)
ConstraintsModifiersSnippets.kt

यह स्निपेट यह आउटपुट देता है:

• clip मॉडिफ़ायर में बदलाव नहीं किया जाता.
  • padding मॉडिफ़ायर, ज़्यादा से ज़्यादा कंस्ट्रेंट को कम कर देता है.
  • size मॉडिफ़ायर, सभी कंस्ट्रेंट को 100dp पर सेट करता है.
  • Image इन शर्तों का पालन करता है और100 100dp.
  • padding मॉडिफ़ायर सभी साइज़ में 10dp जोड़ देता है. इसलिए, यह रिपोर्ट की गई वैल्यू को बढ़ाता है 20dp की चौड़ाई और ऊंचाई.
  • अब ड्रॉइंग बनाने की प्रक्रिया में, clip मॉडिफ़ायर 120 के कैनवस पर 120dp. इस तरह, यह उस साइज़ का सर्कल मास्क बना देता है.
  • इसके बाद, padding मॉडिफ़ायर सभी साइज़ पर अपने कॉन्टेंट को 10dp से सेट कर देता है, इसलिए यह कैनवस के साइज़ को कम करके 100 पर 100dp कर देता है.
  • Image को इसी कैनवस में बनाया जाता है. इमेज इस आधार पर क्लिप की गई है कि 120dp का मूल सर्कल, इसलिए आउटपुट एक नॉन-राउंड नतीजा है.