Unsplash पर डारिया नेपरीखिना द्वारा फोटो

एंड्रॉइड डेवलपर्स के लिए फ़्लटर: फ़्लटर में फ़्रेमलैटआउट कैसे डिज़ाइन करें।

यह ब्लॉग एंड्रॉइड डेवलपर्स के लिए है जो फ्लटर के साथ मोबाइल एप्लिकेशन बनाने के लिए अपने मौजूदा एंड्रॉइड ज्ञान को लागू करना चाहते हैं। इस ब्लॉग में, हम यह पता लगाने जा रहे हैं कि फ़्लटर में फ़्रेमलैटआउट के लिए समकक्ष डिज़ाइन विजेट क्या है।

श्रृंखला

  • फ़्लटर में गतिविधि यूआई कैसे डिज़ाइन करें?
  • कैसे Flear में LinearLayout डिजाइन करने के लिए?
  • कैसे फ़्लटर में FrameLayout डिजाइन करने के लिए? (आप यहाँ हैं)

आवश्यक शर्तें

यह ब्लॉग पहले से ही मानता है कि आपने अपनी मशीन में स्पंदन को सेटअप कर दिया है और एक हैलो वर्ल्ड ऐप चलाने में सक्षम है। यदि आप अभी तक स्पंदन स्थापित नहीं करते हैं, तो यहां से शुरू हो जाता है।

डार्ट ऑब्जेक्ट-ओरिएंटेड कॉन्सेप्ट पर आधारित है, इसलिए एंड्रॉइड जावा डेवलपर के रूप में आप डार्ट को बहुत आसानी से पकड़ पाएंगे।

आएँ शुरू करें

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

https://stackoverflow.com/questions/25679369/what-does-framelayout-do

Android में ज्यादातर दो मामलों के लिए FrameLayout का उपयोग किया जाता है।

  1. अन्य बच्चे के दृश्य के शीर्ष पर एक दृश्य आकर्षित करने के लिए, अर्थात् शीर्ष पर सबसे हाल ही में जोड़े गए बच्चे के साथ स्टैक के रूप में विचारों को ओवरलैप करने के लिए।
  2. यह एक कंटेनर के रूप में उपयोग किया जाता है जो फ्रेगमेंट को आकर्षित करता है।

दूसरा कारण एंड्रॉइड के लिए सही है, लेकिन स्पंदन के मामले में क्योंकि सब कुछ एक विजेट है, इसीलिए फ्रैगमेंट की अवधारणा फ़्लटर में लागू नहीं होती है क्योंकि हम विजेट का उपयोग करते हैं।

अब पहली बार इस्तेमाल किया गया मामला डिजाइनिंग के लिए बहुत स्पष्ट है। तो स्पंदन एक समतुल्य विजेट प्रदान करता है जो फ्रेमलैटआउट के रूप में व्यवहार करता है। हां, मैं इसके स्टैक विजेट को जानता हूं क्योंकि मैंने पहले उपयोग के मामले में बोल्ड-इटैलिक शब्द बनाया था।

ढेर

स्टैक अपने बच्चों को इसके बॉक्स के किनारों के सापेक्ष रखता है। यह वर्ग फ्रेमलैट और इसके अधिक उपयोगी के बराबर है जब आप एक सरल तरीके से कई बच्चों को ओवरलैप करना चाहते हैं, उदाहरण के लिए कुछ पाठ और एक छवि, एक ढाल के साथ ओवरलेड और नीचे से जुड़ा एक बटन।

https://flutter.io/widgets/layout/

इस प्रकार हम स्टैक को स्पंदन में परिभाषित करते हैं।

यहाँ उपरोक्त कोड के लिए आउटपुट है।

स्क्रीनशॉट -1

जैसा कि हम फ्रेमलैट में जानते हैं कि बच्चे के विचार स्टैक के रूप में तैयार किए गए हैं जो कि उनके द्वारा परिभाषित किए गए आदेश के आधार पर दूसरे के शीर्ष पर एक है। पहला बच्चा सबसे नीचे होगा और आखिरी परिभाषित बच्चा सबसे ऊपर होगा।

वही अवधारणा स्टैक विजेट पर जाती है। बाल विजेट बच्चों में सबसे पहले परिभाषित किया गया: <विजेट> [] बच्चों में सबसे नीचे और आखिरी आइटम पर होगा: <विजेट> [] शीर्ष पर तैयार किया जाएगा।

1. एंड्रॉइड: गुरुत्वाकर्षण

यह माता-पिता के लेआउट में परिभाषित किया गया है क्योंकि फ्रेमलैट में एंड्रॉइड नहीं है: गुरुत्वाकर्षण विशेषता, आपको एंड्रॉइड को प्राप्त करने के लिए प्रत्येक बच्चे को लेआउट_ग्रेविटी असाइन करने की आवश्यकता है: गुरुत्वाकर्षण व्यवहार।

लेकिन स्टैक एक कदम आगे निकल गया और एंड्रॉइड प्रदान करता है: गुरुत्वाकर्षण व्यवहार इन-बिल्ड जो कि Stack.alignment प्रॉपर्टी का उपयोग करके प्राप्त किया जा सकता है जो AlignmentDirectional ऑब्जेक्ट लेता है जो AlignmentDirectional.topStart, AlignmentDirectional.center आदि की तरह पूर्वनिर्धारित एनम है।

चूंकि एंड्रॉइड: गुरुत्वाकर्षण को पैरेंट लेआउट में परिभाषित किया गया है इसलिए हम माता-पिता में Stack.alignment को परिभाषित करेंगे और साथ ही हमारा स्टैक विजेट है। यह है कि आप उपरोक्त उदाहरण में कैसे परिभाषित करते हैं।

बच्चा: नया स्टैक (
  संरेखण: AlignmentDirectional.center,
  बच्चे: [
   ... // आपके सभी बच्चे विगेट्स
  ],
)

यदि आप संरेखण गुण के लिए कोई मान असाइन नहीं करते हैं, तो डिफ़ॉल्ट रूप से यह AlignmentDirectional.topStart लेता है। आप स्क्रीनशॉट -1 का उल्लेख कर सकते हैं, जहां हमने किसी भी संरेखण मूल्य को परिभाषित नहीं किया है जो डिफ़ॉल्ट रूप से इसे शीर्ष शुरुआत कोने में बदल देता है।

स्पंदन के बारे में सौंदर्य नामकरण परंपराएं हैं आप यह बता सकते हैं कि इसका क्या मतलब है। एलाइनमेंट प्रॉपर्टी एनम नाम से आप पहचान सकते हैं कि यह क्या करने जा रहा है। AlignmentDirectional.topStart बच्चों के स्टैक विजेट के शीर्ष कोने और इतने पर सेट करने जा रहा है। यह अन्य AlignmentDirectional मानों के साथ कैसा दिखता है।

शीर्ष गुरुत्वाकर्षणकेंद्र गुरुत्वाकर्षणनीचे का गुरुत्वाकर्षण

ध्यान दें :

  1. यदि हम Stack के लिए किसी भी आकार को परिभाषित नहीं करते हैं तो यह उसके मूल आकार को ले जाएगा अर्थात match_parent। ऊपर दिए गए उदाहरण में, हमने BoxConstraints.expand () का उपयोग करके कंटेनर को विस्तारित किया है ताकि यह हमारे मामले में सभी उपलब्ध स्थान या स्क्रीन को ले सके। जो चैती रंग से पहचाना जा सकता है। चूंकि हमने स्टैक को किसी भी आकार को परिभाषित नहीं किया है, इसलिए यह उसके माता-पिता यानी पूरे स्क्रीन जितना बड़ा होगा, और स्टैक के आकार के अनुसार Stack.alignment संपत्ति काम करेगी।
  2. यदि हम Stack माता-पिता के लिए किसी भी आकार को परिभाषित नहीं करते हैं, तो Stack अपने उपलब्ध बच्चों से अधिकतम आकार लेगा, अर्थात् wra_content। इसलिए कि Stack.alignment गुण स्टैक के आकार के अनुसार विजेट्स संरेखित करेगा। नीचे आउटपुट है जब हम BoxConstraints.expand () कंटेनर से बाधा हटाते हैं।

2. एंड्रॉइड: लेआउट_ग्रेविटी

एंड्रॉइड: लेआउट_ ग्रेविटी व्यू के बाहर का गुरुत्वाकर्षण है। उस दिशा को निर्दिष्ट करता है जिसमें दृश्य को अपने माता-पिता की सीमा को स्पर्श करना चाहिए। यह वही है जो हम फ़्रेमलैटआउट में अधिकांश समय का उपयोग करते हैं। स्टैक में इस व्यवहार को जोड़ने के लिए, आपको बच्चे को Align विजेट में लपेटने की आवश्यकता है जो Android में लेआउट_गैविटी के रूप में व्यवहार करता है। यह आप प्रत्येक बच्चे के लिए संरेखित विजेट को कैसे परिभाषित करते हैं।

स्क्रीनशॉट -2

उपरोक्त कोड के अनुसार, हमने Align.alignment संपत्ति का उपयोग करके बच्चे को चार कोनों में संरेखित किया है। अगर हम डिफ़ॉल्ट आकार की तुलना में संरेखित विजेट के साथ स्टैक के लिए किसी भी आकार को परिभाषित नहीं करते हैं तो स्टैक उपलब्ध स्थान तक फैल जाएगा अर्थात हमारे मामले में पूरी स्क्रीन और फिर यह उपलब्ध स्थान के अनुसार विजेट को संरेखित करेगा यही कारण है कि हम चैती रंग देख पा रहे हैं बिना BoxConstraints.expand ()।

आइए ग्रीन बॉक्स विजेट में Align.alignment संपत्ति के साथ खेलते हैं और देखें कि यह कैसा दिखता है।

शीर्ष संरेखणकेंद्र संरेखणनिचला संरेखण

3. स्थिति

अब, यह बोनस विजेट है जो हमें स्टैक में मिलता है। वर्तमान में, फ़्रेमलैटआउट में कोई स्थिति व्यवहार नहीं है। स्थिति विजेट कुछ भी नहीं है, लेकिन एक विजेट है जो नियंत्रित करता है कि स्टैक का बच्चा कहाँ तैनात है। Stack में चाइल्ड विजेट की स्थिति को परिभाषित करने के लिए हमें बच्चे को स्थिति विजेट के अंदर लपेटने और हमारी ज़रूरत के अनुसार ऊपर, नीचे बाएँ और दाएँ गुणों का उपयोग करके स्थिति को परिभाषित करने की आवश्यकता है।

यहाँ तैनात विजेट को परिभाषित करने के लिए नमूना कोड है।

स्क्रीनशॉट -3

स्क्रीनशॉट -3 आउटपुट से, आप देख सकते हैं कि विजेट दिए गए पदों के साथ संरेखित हैं। आप स्थिति विजेट के लिए चौड़ाई और ऊँचाई को भी परिभाषित कर सकते हैं।

निष्कर्ष

फ़्रेमलैटआउट का उपयोग आमतौर पर एंड्रॉइड में किया जाता है। ओवरलैपिंग विजेट को स्टैक्ड के साथ पोज़िशन विजेट की तरह अतिरिक्त सुविधाओं के साथ आसान बनाया गया है। आने वाले ब्लॉग्स में अधिक विषयों को शामिल करने की उम्मीद है। मैंने FrameLayout के संदर्भ में स्टैक विशेषताओं के साथ खेलने के लिए एक नमूना ऐप बनाया है। आप स्थिति विजेट के आउटपुट को देखने के लिए टूलबार आइकन पर क्लिक कर सकते हैं।

अगर आपके पास Android विषय के लिए कोई सुझाव है, जिसे आप Flutter में सीखना चाहते हैं, तो कृपया मुझे टिप्पणियों में बताएं।

यहाँ Android उदाहरण के लिए स्पंदन बाहर की जाँच करें।

धन्यवाद !!!

अगर आपको यह लेख मददगार लगे। कृपया, इसे साझा करें और ताली बजाएं ताकि अन्य लोग इसे यहां माध्यम पर देखेंगे। यदि आपके पास कोई क्वायर या सुझाव है, तो ब्लॉग पर मुफ्त टिप्पणी महसूस करें या मुझे ट्विटर, गिटहब या रेडिट पर हिट करें।

मेरे आने वाले ब्लॉग के लिए नवीनतम अपडेट प्राप्त करने के लिए आप मुझे माध्यम, ट्विटर, GitHub या Reddit पर फ़ॉलो कर सकते हैं।