एमडीसी -102: भौतिक रचना आणि लेआउट

मटेरियल डिझाइन नेव्हिगेशन स्वरूप ऑफर करते जे मोठ्या प्रमाणात वापराची हमी देतात. सर्वात दृश्यमान घटकांपैकी एक म्हणजे अप्पर अ‍ॅप्लिकेशन बार.

Google Play विकसक खाते तयार करा

आपली वैयक्तिक माहिती, आपल्या निवडीचा पत्ता आणि आपला संकेतशब्द माहिती द्या.

विक्रीच्या सामान्य अटी (जीटीसी) स्वीकारा.

स्वत: चा एक छान फोटो जोडा.

Google Play विकसक खाते तयार करा

Apple पलपेक्षा Google Play विकसक खाते तयार करण्याची प्रक्रिया खूपच सोपी आहे.

आपल्या जीमेल पत्त्यासह कनेक्ट व्हा.

जीटीसी स्वीकारा.

नोंदणी फी समायोजित करा: आपल्या आवडीचे सर्व अनुप्रयोग प्रकाशित करण्यासाठी 25 युरोचे एकल देय !

आपल्या खात्याशी संबंधित माहितीची माहिती द्या: विकसकाचे नाव, ईमेल पत्ता आणि दूरध्वनी क्रमांक.

याने आपल्या प्रश्नाचे उत्तर दिले आहे ?

आपल्या टिप्पण्या सबमिट करण्यात समस्या आल्या त्या टिप्पण्यांबद्दल धन्यवाद. कृपया पुन्हा प्रयत्न करा.

9 नोव्हेंबर 2021 रोजी शेवटचे अद्यतन

संबंधित लेख

• Google Play कन्सोलवर अनुप्रयोग तयार करा
• Android P12 प्रमाणपत्र व्युत्पन्न करा
• एपीके किंवा एएबी फाईल निर्यात करा
• Android अनुप्रयोग प्रकाशित करा
• प्ले स्टोअरच्या बाहेर Android अॅप प्रकाशित करा
• Google Play Store वर प्रकाशित करा

एमडीसी -102: भौतिक रचना आणि लेआउट

मटेरियल घटक (एमडीसी) विकसकांना मटेरियल डिझाइनची अंमलबजावणी करण्यात मदत करते. Google वर अभियंता आणि वापरकर्त्याच्या अनुभवाच्या तज्ञांच्या कार्यसंघाद्वारे डिझाइन केलेले, एमडीसी डझनभर मोहक आणि फंक्शनल यूजर इंटरफेस घटक ऑफर करते. हे Android, iOS, वेब आणि फडफडण्यासाठी उपलब्ध आहे.साहित्य.आयओ/विकसित.

एमडीसी -101 प्रोग्रामिंग वर्कशॉपमध्ये, आपण कनेक्शन पृष्ठ तयार करण्यासाठी दोन सामग्री घटक घटकांचा वापर केला: मजकूर फील्ड आणि बटणे “शाई” अ‍ॅनिमेशन. या तळांवर, नेव्हिगेशन, रचना आणि डेटा जोडून आपला अनुप्रयोग समृद्ध करूया.

कार्यशाळेची उद्दीष्टे

या प्रोग्रामिंग वर्कशॉपमध्ये, आपण यासाठी मुख्यपृष्ठ स्क्रीन तयार कराल मंदिर, घरासाठी कपडे आणि वस्तूंच्या विक्रीसाठी ई-कॉमर्स अर्ज. या स्क्रीनमध्ये असेल:

• एक उच्च अनुप्रयोग बार
• ग्रीडच्या स्वरूपात उत्पादनांची यादी

कृपया लक्षात घ्या की स्क्रीनशॉटचा अपवाद वगळता ही प्रोग्रामिंग कार्यशाळा मटेरियल 3 ने बदलली होती. तरीही ते समान माहिती व्यक्त करतात.

ही प्रोग्रामिंग कार्यशाळा चार कार्यशाळांपैकी दुसरे आहे जी आपल्याला अभयारण्य नावाच्या उत्पादनासाठी अनुप्रयोग तयार करण्यात मदत करेल. आम्ही शिफारस करतो. आपल्याला येथे आपल्या प्रोग्रामिंग कार्यशाळा सापडतील:

• एमडीसी -101 फडफड: सामग्री घटकांची मूलभूत तत्त्वे
• एमडीसी -103 फडफड: मटेरियल डिझाइनच्या थीमचा वापर (रंग, आकार, उन्नती आणि प्रकार)
• एमडीसी -104 फडफड: प्रगत मटेरियल डिझाइन घटक

या प्रोग्रामिंग कार्यशाळेतील मटेरियल फडफड सामग्री घटक आणि उपप्रणाली

• वरील
• ग्रीड्स
• कार्डे

या प्रोग्रामिंग कार्यशाळेत आपण मटेरियल फडफडद्वारे प्रदान केलेले डीफॉल्ट घटक वापराल. आपण त्यांना एमडीसी -103 विभागात सानुकूलित करण्यास शिकाल: मटेरियल डिझाइनच्या थीमचा वापर (रंग, आकार, उन्नती आणि प्रकार).

फडफडसह विकासाच्या आपल्या अनुभवाच्या पातळीचे आपण कसे मूल्यांकन कराल ?

2. फडफड विकास वातावरण कॉन्फिगर करा

या कार्यशाळेसाठी, आपल्याला दोन सॉफ्टवेअर आवश्यक आहे: फडफड एसडीके आणि एक प्रकाशक.

आपण खालीलपैकी एका डिव्हाइसवर प्रोग्रामिंग कार्यशाळा चालवू शकता:

• आपल्या संगणकावर कनेक्ट केलेले Android किंवा भौतिक iOS डिव्हाइस आणि विकसक मोडमध्ये सेट.
• आयओएस सिम्युलेटर (स्थापित करण्यासाठी एक्सकोड साधने).
• Android एमुलेटर (जे Android स्टुडिओमध्ये कॉन्फिगर केले जाणे आवश्यक आहे).
• एक ब्राउझर (डीबगिंगसाठी क्रोम आवश्यक आहे).
• विंडोज, लिनक्स किंवा मॅकोस डेस्कटॉप म्हणून. आपण आपला अनुप्रयोग प्लॅटफॉर्मवर विकसित करणे आवश्यक आहे जेथे आपण ते तैनात करण्याची योजना आखत आहात. उदाहरणार्थ, आपण विंडोज डेस्कटॉप अनुप्रयोग विकसित करू इच्छित असल्यास, योग्य संकलन साखळीमध्ये प्रवेश करण्यासाठी आपण विंडोजवर हे करणे आवश्यक आहे. ऑपरेटिंग सिस्टमच्या विशिष्ट आवश्यकतांबद्दल देखील जाणून घ्या, जे डॉक्सवर तपशीलवार आहेत.फडफड.देव/डेस्कटॉप.

3. प्रोग्रामिंग कार्यशाळेसाठी प्रस्थान अॅप डाउनलोड करा

आपण आधीच एमडीसी -101 कार्यशाळेचे अनुसरण केले आहे ?

आपण एमडीसी -101 प्रोग्रामिंग कार्यशाळा पूर्ण केल्यास, आपला कोड ही कार्यशाळा सुरू करण्यास तयार असावा. पुढील टप्प्यावर जा: उच्च अनुप्रयोग बार जोडा.

आपण सुरवातीपासून प्रारंभ करा ?

प्रारंभिक कार्यशाळा प्रस्थान अनुप्रयोग डाउनलोड करा

प्रारंभिक अनुप्रयोग मटेरियल-कंपोनेंट-फूलेटर-कोडलाब्स -102-स्टार्टर_अँड_101-पूर्ण/एमडीसी_100_सेरीजमध्ये आहे .

… किंवा गीथब मधील कार्यशाळा क्लोन करा

गीथबमधील या प्रोग्रामिंग कार्यशाळेला क्लोन करण्यासाठी, खालील आज्ञा चालवा:

गिट क्लोन https: // गीथब.कॉम/मटेरियल-कंपोनेंट्स/मटेरियल-कंपोनेंट्स-फूलेटर-कोडलाब.गिट सीडी मटेरियल-कंपोनेंट्स-फ्लटर-कोडलेब्स/एमडीसी_100_सरीज गिट चेकआउट 102-स्टार्टर_अँड_101-पूर्ण

मदतीसाठी, गीथबमधील क्लोनिंग विभाग पहा

योग्य शाखा निवडा

104 वर एमडीसी -101 प्रोग्रामिंग कार्यशाळा एकमेकांवर अवलंबून असतात. म्हणून जेव्हा आपण एमडीसी -102 वर्कशॉपसाठी कोड पूर्ण करता तेव्हा तो एमडीसी -103 कार्यशाळेचा प्रारंभिक कोड बनतो. कोड अनेक शाखांमध्ये विभागला गेला आहे, जो आपण या आदेशाचा वापर करून सूची प्रदर्शित करू शकता:

गिट शाखा -यादी

तयार केलेला कोड प्रदर्शित करण्यासाठी, 103-स्टार्टर_अँड_102-पूर्ण शाखेत जा .

प्रकल्प उघडा आणि अनुप्रयोग कार्यान्वित करा

1. आपल्या पसंतीच्या प्रकाशकामध्ये प्रकल्प उघडा.
2. आपण निवडलेल्या प्रकाशकासंदर्भातील सूचनांचे अनुसरण करा. ते “अ‍ॅप चालवा” परिच्छेद (अनुप्रयोग कार्यान्वित करा) वर प्रवेश करण्यायोग्य आहेत.

यशस्वी ऑपरेशन. एमडीसी -101 प्रोग्रामिंग वर्कशॉपमधील अभयारण्य कनेक्शन पृष्ठ आपल्या डिव्हाइसवर प्रदर्शित करणे आवश्यक आहे.

आता कनेक्शन स्क्रीन ठिकाणी आहे, चला अनुप्रयोगात काही उत्पादने जोडूया.

4. उच्च अनुप्रयोग बार जोडा

या क्षणी, आपण “पुढील” बटणावर क्लिक केल्यास, मुख्य स्क्रीन संदेशासह प्रदर्शित होईल “आपण ते केले!”(आपण यशस्वी झाला.)). परिपूर्ण. तथापि, आमच्या वापरकर्त्याकडे काही करण्यासारखे काही नाही आणि तो अनुप्रयोगात कोठे आहे हे माहित नाही. आपल्याला मदत करण्यासाठी, नेव्हिगेशन जोडण्याची वेळ आली आहे.

तेथे नेव्हिगेशन घटक, परस्परसंवाद, व्हिज्युअल इंडिकेटर आणि माहिती आर्किटेक्चरचा संदर्भ देते जे वापरकर्त्यांना अनुप्रयोगात नेव्हिगेट करण्याची परवानगी देतात. हे आपल्याला सामग्री आणि वैशिष्ट्ये शोधण्याची आणि कार्ये सहजपणे करण्यास अनुमती देते.

अधिक शोधण्यासाठी, मटेरियल डिझाइनच्या सूचनांमध्ये नेव्हिगेशनसाठी समर्पित लेखाचा सल्ला घ्या.

मटेरियल डिझाइन नेव्हिगेशन स्वरूप ऑफर करते जे मोठ्या प्रमाणात वापराची हमी देतात. सर्वात दृश्यमान घटकांपैकी एक म्हणजे अप्पर अ‍ॅप्लिकेशन बार.

आयओएस अंतर्गत “नेव्हिगेशन बार” किंवा फक्त “अनुप्रयोग बार” किंवा “शीर्षलेख” या नावाने आपल्याला हा घटक माहित असेल.

वापरकर्त्यांना इतर क्रियांवर द्रुत प्रवेशाची ऑफर देण्यासाठी, एक उच्च अनुप्रयोग बार जोडूया.

अ‍ॅपबार विजेट जोडा

घरात.डार्ट, “मचान” मध्ये एक अ‍ॅपबार जोडा, नंतर कॉन्टला हायलाइट केलेले हटवा:

रिटर्न कॉन्स्ट स्कोफोल्ड (// टोडो: अ‍ॅप बार जोडा (102) अ‍ॅपबार: अ‍ॅपबार (// टोडो: बटणे आणि शीर्षक जोडा (102)), 

ची जोडअ‍ॅपबार अ‍ॅपबार फील्डवर: स्कोफोल्डिंग आम्हाला एक परिपूर्ण आणि विनामूल्य लेआउट प्राप्त करण्यास अनुमती देते, अनुप्रयोग बार पृष्ठाच्या शीर्षस्थानी आणि शरीराच्या खाली ठेवते.

मचान मटेरियलअॅप्समधील एक महत्त्वाचे विजेट आहे. हे पॅनल्स, “स्नॅकबार” नोटिफिकेशन बार आणि तळाशी पत्रक घटक यासारख्या सर्व प्रकारच्या वर्तमान प्रकरणांचे घटक प्रदर्शित करण्यासाठी व्यावहारिक एपीआय प्रदान करते. हे अगदी फ्लोटिंग अ‍ॅक्शन बटणाच्या प्लेसमेंटला सुलभ करते.

मचान बद्दल अधिक जाणून घेण्यासाठी फडफडण्याच्या दस्तऐवजीकरणाचा सल्ला घ्या.

प्रकल्प रेकॉर्ड करा. एकदा मंदिर अद्यतनित झाल्यानंतर, क्लिक करा पुढे (खालील) मुख्यपृष्ठ स्क्रीन प्रदर्शित करण्यासाठी.

घटक चांगल्या स्थितीत आहे, परंतु त्यात शीर्षक नाही.

मजकूर विजेट जोडा

घरात.डार्ट, अ‍ॅपबार अनुप्रयोग बारमध्ये एक शीर्षक जोडा:

// टोडो: अ‍ॅप बार जोडा (102) अ‍ॅपबार: अ‍ॅपबार (// टोडो: बटणे आणि शीर्षक जोडा (102) शीर्षक: कॉन्ट टेक्स्ट ('मंदिर'), // टोडो: ट्रेलिंग बटणे जोडा (102) 

प्रकल्प रेकॉर्ड करा.

आपण प्रत्येक व्यासपीठासाठी भिन्नता लक्षात घेतल्या असतील. मटेरियल डिझाइन सिस्टम विचारात घेते की प्रत्येक प्लॅटफॉर्म (Android, iOS, वेब) भिन्न आहे आणि वापरकर्त्याच्या अपेक्षा भिन्न आहेत. उदाहरणार्थ, iOS वर, शीर्षके जवळजवळ नेहमीच केंद्रित असतात. हे UIKIT द्वारे प्रदान केलेले डीफॉल्ट वर्तन आहे. Android वर, ते डावीकडे उभे आहेत. म्हणूनच, आपण एमुलेटर किंवा Android डिव्हाइस वापरत असल्यास, आपले शीर्षक डावीकडे संरेखित केले पाहिजे. सिम्युलेटर किंवा आयओएस डिव्हाइसच्या बाबतीत, ते केंद्रित केले जाणे आवश्यक आहे.

अधिक शोधण्यासाठी, मटेरियल डिझाइनसह भिन्न प्लॅटफॉर्मवर अनुकूलन करण्यासाठी या लेखाचा सल्ला घ्या.

बर्‍याच अनुप्रयोग बारमध्ये शीर्षकाच्या पुढे एक बटण असते. आमच्या अनुप्रयोगात मेनू चिन्ह जोडा.

ओळीच्या सुरूवातीस आयकॉनबटन बटण जोडा

नेहमी घरात.डार्ट, अग्रगण्य फील्डसाठी आयकॉनबटन घटक परिभाषित करा: अ‍ॅपबार अनुप्रयोग बारचे. (शीर्षक फील्डच्या आधी ठेवा: सुरुवातीपासून ओळीच्या शेवटी सुरू होण्याच्या अनुषंगाने):

 // टोडो: बटणे आणि शीर्षक जोडा (102) अग्रगण्य: आयकॉनबटन (आयकॉन: कॉन्स्ट आयकॉन (चिन्ह.मेनू, सिमेंटिक लेबल: 'मेनू',), ऑनप्रेस: ​​() < print('Menu button'); >, )), 

प्रकल्प रेकॉर्ड करा.

मेनू चिन्ह (ज्याला “हॅमबर्गर” देखील म्हणतात) इच्छित ठिकाणी दिसते.

वर्ग आयकॉनबटन आपल्या अनुप्रयोगात सामग्रीचे चिन्ह समाकलित करण्याचा एक व्यावहारिक मार्ग आहे. ती एक विजेट वापरते चिन्ह. फडफडत वर्गात चिन्हांचे संपूर्ण संग्रह आहे चिन्ह. “कॉन्स्ट” चॅनेल मॅपिंगनुसार चिन्ह स्वयंचलितपणे आयात केले जातात.

चिन्हांच्या वर्गाबद्दल अधिक जाणून घेण्यासाठी, फडफडण्याचे दस्तऐवजीकरण पहा. आयकॉन विजेटबद्दल अधिक जाणून घेण्यासाठी, फडफडण्याचे दस्तऐवजीकरण पहा.

आपण ओळीच्या शेवटी बटणे देखील जोडू शकता. फडफड मध्ये, या बटणांना “कृती” म्हणतात.

अटी सुरुवात आणि शेवट संबंधित भाषेची पर्वा न करता वाचनाचा अर्थ व्यक्त करा. जेव्हा आपण इंग्रजी सारख्या डावीकडून उजवीकडे वाचून जीभात काम करता तेव्हा, सुरुवात म्हणजे च्या डावी कडे आणि शेवट म्हणजे उजवीकडे. अरबीप्रमाणेच उजवीकडून डावीकडून वाचलेल्या भाषेत, हा शब्द सुरुवात म्हणजे उजवीकडे, आणि शेवट म्हणजे च्या डावी कडे.

वापरकर्त्याच्या इंटरफेसच्या उलटसुलतीबद्दल अधिक जाणून घेण्यासाठी, द्विदिशतेवरील सामग्री डिझाइन सूचनांचा सल्ला घ्या.

क्रिया जोडा

इतर दोन आयकॉनबटन घटकांसाठी पुरेशी जागा आहे.

शीर्षकानंतर त्यांना अ‍ॅपबार उदाहरणात जोडा:

// टोडो: ट्रेलिंग बटणे जोडा (102) क्रिया: [आयकॉनबटन (चिन्ह: कॉन्स्ट आयकॉन (चिन्ह.शोध, सिमेंटिक लेबल: 'शोध',), ontpresd: () < print('Search button'); >, ), आयकॉनबटन (चिन्ह: कॉन्स्ट आयकॉन (चिन्ह.ट्यून, सिमेंटिक लेबल: 'फिल्टर',), ओएनपीआरएसडी: () < print('Filter button'); >, ),], 

प्रकल्प रेकॉर्ड करा. आपली मुख्यपृष्ठ स्क्रीन खालीलप्रमाणे उद्भवली पाहिजे:

अनुप्रयोगात आता लाइनच्या सुरूवातीस एक बटण आहे, शीर्षक आणि उजवीकडे दोन क्रिया. अ‍ॅप्लिकेशन बारचा देखील परिणाम होतोउत्थान थोडीशी सावलीमुळे हे दर्शविल्यामुळे ते सामग्रीपेक्षा वेगळ्या स्तरावर आहे.

आयकॉन वर्गात, फील्ड सिमेंटिकॅबेल फडफडण्यासाठी प्रवेशयोग्यता माहिती जोडण्याचा एक सामान्य मार्ग आहे. आयओएस ibility क्सेसीबिलिटी लेबेलबेलवरील Android सामग्री वर्डिंग आणि यूआयएसीएसएससीबिलिटी कार्यक्षमतेच्या अगदी जवळ ही एक प्रणाली आहे . आपल्याला हे बर्‍याच कोर्समध्ये सापडेल.

या फील्डमधील माहिती या बटणाच्या भूमिकेबद्दल स्क्रीन वाचकांवर माहिती प्रदान करणे शक्य करते.

जर विजेटमध्ये सिमेंटिक लेबल फील्ड नसेल तर: आपण त्यास विजेटमध्ये एन्केप्युलेट करू शकता शब्दार्थ. शब्दार्थ विजेटबद्दल अधिक जाणून घेण्यासाठी, फडफडण्याचे दस्तऐवजीकरण पहा.

5. ग्रीडमध्ये एक पत्रक जोडा

आता आमचा अनुप्रयोग थोडा अधिक संरचित झाला आहे, तर त्या फायलींमध्ये ठेवून त्याची सामग्री आयोजित करूया.

द कार्डे स्वतंत्र घटक आहेत जे दिलेल्या विषयाशी संबंधित सामग्री आणि क्रिया प्रदर्शित करतात. ते संकलनाच्या स्वरूपात समान सामग्री सादर करण्याचा एक लवचिक मार्ग ऑफर करतात.

अधिक शोधण्यासाठी, मटेरियल डिझाइन सूचनांमधील फायलींसाठी समर्पित लेख पहा.

कार्ड विजेट (पत्रक) बद्दल अधिक जाणून घेण्यासाठी, फडफड मध्ये लेआउट तयार करण्याच्या लेखाचा सल्ला घ्या.

ग्रिडव्यू विजेट जोडा

वरील अनुप्रयोग बार अंतर्गत पत्रक जोडून प्रारंभ करूया. सध्या, विजेट कार्ड (पत्रक) स्वतःला दृश्यमानपणे ठेवण्यासाठी पुरेशी माहिती नाही. म्हणून आम्ही विजेटमध्ये हे एन्केप्युलेट करू ग्रिडव्यू.

ग्रिडव्यू विजेटसह मचान घटकाच्या मुख्य भागाच्या मध्यभागी पुनर्स्थित करा:

// TODO: एक ग्रीड दृश्य जोडा (102) शरीर: ग्रिडव्यू.गणना (क्रॉसॅक्सिस्काऊंट: 2, पॅडिंग: कॉन्स्ट एजंट्स.सर्व (16.0), चाईल्डस्पेक्ट्रेटिओ: 8.0/9.0, // TODO: कार्ड्सची ग्रीड तयार करा (102) मुले: [कार्ड ()],),), 

चला या कोडचे विश्लेषण करूया. ग्रिव्हर विजेट निर्माता गणना () ला कॉल करते, कारण त्या दर्शविलेल्या घटकांची संख्या मोजली जाऊ शकते आणि ती असीम नाही. परंतु त्याचा लेआउट परिभाषित करण्यासाठी त्याला अतिरिक्त माहितीची आवश्यकता आहे.

क्रॉसॅक्सिस्काऊंट व्हेरिएबल: प्रत्येक ओळीच्या घटकांची संख्या दर्शवते. आम्हाला दोन स्तंभ मिळवायचे आहेत.

L ‘ट्रान्सव्हर्सल अक्ष फडफड मध्ये आम्ही स्क्रोल करत नाही अशा अक्षांशी संबंधित आहे. स्क्रोलिंगची भावना म्हणतात मुख्य अक्ष. आपण अनुलंब स्क्रोलिंग वापरत असल्यास, ग्रिडव्यूसह डीफॉल्ट प्रकरणात, ट्रान्सव्हर्स अक्ष क्षैतिज आहे.

अधिक शोधण्यासाठी, लेआउट तयार करण्यासाठी समर्पित पृष्ठ पहा.

पॅडिंग फील्ड: ग्रिडव्यू विजेटच्या चार बाजूंनी एक मोकळी जागा परिभाषित करते. अर्थात, हे मार्जिन घटकाच्या परिणामी किंवा त्याखाली दिसू शकत नाही, कारण अद्याप कोणत्याही मुलाचे ग्रीडव्यू या क्षणी या घटकाच्या पुढे ठेवलेले नाही.

चाईल्डस्पेक्टो फील्ड: प्रमाणानुसार घटकांचे आकार ओळखते (उंचीची रुंदी).

डीफॉल्टनुसार, ग्रिडव्यू एकसारखे आकाराचे ब्लॉक्स तयार करते.

आमच्याकडे एक पत्रक आहे, परंतु ते रिक्त आहे. या पत्रकात मुलांचे विजेट जोडा.

सामग्री ठेवा

पत्रकांमध्ये प्रतिमा, शीर्षक आणि दुय्यम मजकूरासाठी क्षेत्र समाविष्ट करणे आवश्यक आहे.

ग्रिडव्यू विजेटमधील मुलांना अद्यतनित करा:

// टोडो: कार्ड्सची ग्रीड तयार करा (102) मुले: [कार्ड (क्लिपबहेव्हियर: क्लिप.अँटियालियास, मूल: स्तंभ (क्रॉसॅक्सिसालिगमेंट: क्रॉसॅक्सिसालिगमेंटमेंट.प्रारंभ, मुले: [p स्पेक्ट्रेटिओ (p स्पेक्ट्रेटिओ: 18.0/11.0, मूल: प्रतिमा.मालमत्ता ('मालमत्ता/हिरा.पीएनजी '),), पॅडिंग (पॅडिंग: कॉन्स्ट एजंट्स.Fromltrb (16.0, 12.0, 16.0, 8.0), मूल: स्तंभ (क्रॉसॅक्सिसालिगमेंट: क्रॉसॅक्सिसालिगमेंटमेंट.प्रारंभ, मुले: [मजकूर ('शीर्षक'), कॉन्स्ट साईडबॉक्स (उंची: 8.0), मजकूर ('दुय्यम मजकूर'),],),),],)]]]], 

हा कोड एक स्तंभ विजेट (स्तंभ) जोडतो जो आपल्याला मुलांचे विजेट अनुलंब करण्यास अनुमती देतो.

क्रॉसॅक्सिसालिगमेंट पॅरामीटर: फील्ड क्रॉसॅक्सिसलिगमेंट मूल्य निर्दिष्ट करते.प्रारंभ करा, ज्याचा अर्थ “ओळीच्या प्रारंभावरील मजकूर संरेखित करा” बाजू “.

विजेट प्रसर गुणोत्तर प्रदर्शित प्रतिमेचे प्रमाण परिभाषित करते, प्रदान केलेल्या प्रतिमेचा प्रकार विचारात न घेता.

घटक पॅडिंग मजकूरासाठी मार्जिन परिभाषित करते.

दोन विजेट्स मजकूर दुसर्‍या वर एक ठेवलेले आणि आठ रिक्त स्थान बिंदूंनी वेगळे केले आहे (आकाराचाबॉक्स)). आम्ही आणखी एक घटक तयार करतो स्तंभ त्यांना आतील मार्जिन देण्यासाठी.

प्रकल्प रेकॉर्ड करा.

या विहंगावलोकनात, आपण पाहू शकता की पत्रक मार्जिनसह स्थित आहे, त्याचे कोपरे गोल आहेत आणि ते एक सावली प्रोजेक्ट करते (त्याच्या उन्नतीचे प्रतिनिधित्व करते). संपूर्ण फॉर्मला मटेरियल डिझाइन सिस्टममध्ये “कंटेनर” म्हणतात (कंटेनर नावाच्या विजेट क्लासमध्ये गोंधळ होऊ नये).

कंटेनर व्यतिरिक्त, पत्रकांचे सर्व घटक साहित्यात पर्यायी असतात. आपण शीर्षलेख मजकूर, एक स्टिकर किंवा अवतार, उपशीर्षक मजकूर, विभाजक आणि अगदी मुरुम आणि चिन्ह देखील जोडू शकता.

पत्रकांच्या सामग्रीबद्दल अधिक जाणून घेण्यासाठी, मटेरियल डिझाइनच्या सूचनांमध्ये या लेखाचा सल्ला घ्या.

पत्रके सामान्यत: इतर पत्रकांसह संग्रहात दर्शविली जातात. त्यांना ग्रीडमध्ये संग्रहाच्या स्वरूपात व्यवस्था करा.

6. फायलींचा संग्रह तयार करा

जेव्हा स्क्रीनवर कित्येक पत्रके उपस्थित असतात, तेव्हा त्या एक किंवा अधिक संग्रहात गटबद्ध केल्या जातात. संग्रहातील फायली कोपलानार आहेत: त्यांच्याकडे सर्व समान उंची आहे (म्हणजे जेव्हा ते निवडले किंवा हलविले जात नाहीत तेव्हा ते सांगायचे आहे, जे आम्ही येथे करणार नाही).

फायलींचा संग्रह तयार करा

या क्षणी, आमची पत्रक मुलांच्या शेतात स्थित आहे: ग्रिडव्यू ग्रीड. यामुळे मोठ्या प्रमाणात नेस्टेड कोड होतो जो वाचणे कठीण आहे. आपण कोडच्या या भागाचे फंक्शनमध्ये रूपांतरित करू या आवश्यकतेनुसार रिक्त पत्रके तयार करण्यास आणि फायलींची यादी परत करू या.

बिल्ड () फंक्शनच्या वर एक खाजगी फंक्शन तयार करा (लक्षात ठेवा की अधोरेखित रेषेतून सुरू होणारी कार्ये खाजगी एपीआय आहेत):

// TODO: कार्ड्सचा संग्रह करा (102) यादी _बिल्डग्रीडकार्ड्स (आयएनटी सेंट) < Listcards = List.generate( count, (int index) < return Card( clipBehavior: Clip.antiAlias, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ AspectRatio( aspectRatio: 18.0 / 11.0, child: Image.asset('assets/diamond.png'), ), Padding( padding: const EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: const [ Text('Title'), SizedBox(height: 8.0), Text('Secondary Text'), ], ), ), ], ), ); >, ); रिटर्न कार्ड; > 

ग्रिडव्यू विजेटच्या मुलांच्या फील्डमध्ये व्युत्पन्न केलेल्या फायली नियुक्त करा. विसरू नका या नवीन कोडसह ग्रिडव्यू विजेटमधील सर्व घटक पुनर्स्थित करा ::

// TODO: एक ग्रीड दृश्य जोडा (102) शरीर: ग्रिडव्यू.गणना (क्रॉसॅक्सिस्काऊंट: 2, पॅडिंग: कॉन्स्ट एजंट्स.सर्व (16.0), चाईल्डस्पेक्ट्रेटिओ: 8.0/9.0, मुले: _बिल्डग्रीडकार्ड्स (10) // पुनर्स्थित करा), 

प्रकल्प रेकॉर्ड करा.

कार्डे उपस्थित आहेत, परंतु त्या क्षणासाठी काहीही प्रदर्शित करत नाहीत. उत्पादन डेटा जोडण्याची वेळ आली आहे.

उत्पादन डेटा जोडा

अनुप्रयोगात प्रतिमा, नावे आणि किंमती असलेली काही उत्पादने आहेत. फाईलमध्ये आधीपासूनच उपस्थित विजेटमध्ये हे जोडा

मग घरात.डार्ट, नवीन पॅकेज आयात करा आणि डेटा मॉडेलसाठी प्रदान केलेल्या काही फायली:

आयात 'पॅकेज: फडफड/सामग्री.डार्ट '; आयात करा 'पॅकेज: इंटेल/इंटेल.डार्ट '; 'मॉडेल/उत्पादन' आयात करा.डार्ट '; 'मॉडेल/उत्पादने_रेपोसिटरी' आयात करा.डार्ट '; 

शेवटी, उत्पादनाची माहिती पुनर्प्राप्त करण्यासाठी आणि फायलींमध्ये हा डेटा वापरण्यासाठी _बिल्डग्रीडकार्ड () सुधारित करा:

// TODO: कार्ड्सचा संग्रह करा (102) // ही संपूर्ण पद्धत यादी पुनर्स्थित करा < Listproducts = ProductsRepository.loadProducts(Category.all); if (products.isEmpty) < return const []; > अंतिम थीमडाटा थीम = थीम.(संदर्भ); अंतिम नंबरफॉरमॅट स्वरूपन = नंबरफॉर्मेट.सिंपलकर्नर (स्थानिक: परिसर.स्थानिक (संदर्भ).ToString ()); उत्पादने परत करा.नकाशा ((उत्पादन) < return Card( clipBehavior: Clip.antiAlias, // TODO: Adjust card heights (103) child: Column( // TODO: Center items on the card (103) crossAxisAlignment: CrossAxisAlignment.start, children: [ AspectRatio( aspectRatio: 18 / 11, child: Image.asset( product.assetName, package: product.assetPackage, // TODO: Adjust the box size (102) ), ), Expanded( child: Padding( padding: const EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0), child: Column( // TODO: Align labels to the bottom and center (103) crossAxisAlignment: CrossAxisAlignment.start, // TODO: Change innermost Column (103) children: [ // TODO: Handle overflowing labels (103) Text( product.name, style: theme.textTheme.titleLarge, maxLines: 1, ), const SizedBox(height: 8.0), Text( formatter.format(product.price), style: theme.textTheme.titleSmall, ), ], ), ), ), ], ), ); >)).टोलिस्ट (); > 

लक्षात आले : संकलन आणि अंमलबजावणी सुरू करण्यापूर्वी प्रतीक्षा करा. तेथे एक बदल बाकी आहे.

मजकूर स्वरूपित करण्यासाठी, आम्ही थीम डेटा वापरतो थेमेडाटा मूल्यातून बिल्डकॉन्टेक्स्ट चालू.

मजकूराचे स्वरूपन याबद्दल अधिक जाणून घेण्यासाठी, मटेरियल डिझाइन सूचनांमधील टायपोग्राफीवरील लेखाचा सल्ला घ्या. थीममधून स्वरूपित करण्याबद्दल अधिक जाणून घेण्यासाठी, एमडीसी -103 सह या प्रोग्रामिंग कार्यशाळेनंतर सुरू ठेवा: मटेरियल डिझाइनच्या थीमचा वापर (रंग, आकार, उन्नती आणि प्रकार).

मूल्य प्रसारित करण्यासाठी बिल्ड () फंक्शन सुधारित करा बिल्डकॉन्टेक्स्ट संकलन सुरू करण्यापूर्वी _बिल्डग्रीडकार्ड () वर:

// TODO: एक ग्रीड दृश्य जोडा (102) शरीर: ग्रिडव्यू.गणना (क्रॉसॅक्सिस्काऊंट: 2, पॅडिंग: कॉन्स्ट एजंट्स.सर्व (16.0), चाईल्डस्पेक्ट्रेटिओ: 8.0/9.0, मुले: _बिल्डग्रीडकार्ड (संदर्भ) // बदला कोड), 

गरम अनुप्रयोग पुन्हा सुरू करा.

आपल्या लक्षात येईल की आम्ही फायलींमध्ये उभ्या जागा जोडत नाही. कारण त्यांच्याकडे वरच्या आणि खालच्या बाजूने चार मार्जिन आहेत.

प्रकल्प रेकॉर्ड करा.

उत्पादित डेटा प्रदर्शित केला जातो, परंतु प्रतिमा अनावश्यक जागेने वेढल्या आहेत. डीफॉल्टनुसार, प्रतिमा फील्डसह काढल्या जातात बॉक्सफिट परिभाषित .स्केलेडाउन (या प्रकरणात). सह हे मूल्य पुनर्स्थित करा .फिटविड्थ जेणेकरून ती झूम वाढवू शकेल आणि अनावश्यक जागा काढू शकेल.

फिट फील्ड जोडा: बॉक्सफिट व्हॅल्यू प्रमाणे.फिटविड्थ:

 // टोडो: बॉक्स आकार समायोजित करा (102) फिट: बॉक्सफिट.फिटविड्थ, 

आमची उत्पादने आता अनुप्रयोगात उत्तम प्रकारे प्रदर्शित झाली आहेत.

7. अभिनंदन !

आमचा अनुप्रयोग वापरकर्त्यास कनेक्शन स्क्रीनवरून होम स्क्रीनवर जाण्याची परवानगी देतो जेथे उत्पादने प्रदर्शित केली जातात. कोडच्या काही ओळी उच्च अनुप्रयोग बार (शीर्षक आणि तीन बटणासह) आणि फायली जोडण्यासाठी पुरेसे होत्या (आमच्या अनुप्रयोगाची सामग्री सादर करण्यासाठी). प्राप्त केलेली मुख्य स्क्रीन सोपी आणि कार्यशील आहे आणि त्यात मूलभूत रचना आणि वापरण्यायोग्य सामग्री आहे.

एमडीसी -102 अनुप्रयोगाची पूर्ण केलेली आवृत्ती 103-स्टार्टर_अँड_102-पूर्ण शाखेत उपलब्ध आहे .

आपण पृष्ठावरील आपल्या आवृत्तीची तुलना या शाखेच्या अनुप्रयोगासह करू शकता.

खालील चरण

अनुप्रयोग बार, पत्रक, मजकूर फील्ड आणि पृष्ठाच्या शीर्षस्थानी असलेल्या बटणासह, आम्ही आता मटेरियल फ्लटर लायब्ररीचे चार मुख्य घटक वापरले आहेत. अधिक शोधण्यासाठी, सामग्री घटकांची कॅटलॉग पहा.

जरी आमचा अनुप्रयोग उत्तम प्रकारे कार्य करत असला तरीही, तो ब्रँड ओळख किंवा विशिष्ट दृष्टिकोनाचे प्रतिबिंबित करत नाही. एमडीसी -103 वर्कशॉपमध्ये: मटेरियल डिझाइनच्या थीमचा वापर (रंग, आकार, उन्नती आणि प्रकार), आम्ही आधुनिक आणि डायनॅमिक ब्रँड व्यक्त करण्यासाठी या घटकांची शैली वैयक्तिकृत करू.

या प्रोग्रामिंग कार्यशाळेच्या अनुभूतीने मला वेळ आणि वाजवी प्रयत्न विचारले

पूर्णपणे सहमत

सहमत नाही किंवा सहमत नाही

अजिबात सहमत नाही

मला सामग्री घटक वापरणे सुरू ठेवायचे आहे

पूर्णपणे सहमत

सहमत नाही किंवा सहमत नाही

अजिबात सहमत नाही

अन्यथा सूचित केल्याशिवाय या पृष्ठाची सामग्री क्रिएटिव्ह कॉमन्स असाइनमेंट 4 परवान्याद्वारे नियंत्रित केली जाते.0, आणि कोडचे नमुने अपाचे 2 परवान्याद्वारे नियंत्रित केले जातात.0. अधिक माहितीसाठी, Google विकसक साइटचे नियम पहा. जावा ओरॅकल आणि/किंवा त्याच्या संबद्ध कंपन्यांचा नोंदणीकृत ट्रेडमार्क आहे.