Android डेवलपर्स के लिए स्पंदन। फ़्लटर का उपयोग करके गतिविधि के लिए UI कैसे बनाएं

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

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

यह माना जाता है कि आपने पहले ही अपने पीसी पर फ़्लटर को कॉन्फ़िगर किया है और हैलो वर्ल्ड एप्लिकेशन चला सकते हैं। यदि नहीं, तो करें ।

डार्ट OOP की अवधारणा पर आधारित है, इसलिए Android डेवलपर के लिए इसका उपयोग शुरू करना मुश्किल नहीं है।

लक्ष्य

लेख के अंत में, हम स्पंदन विगेट्स का उपयोग करके गतिविधि के लिए एक उपयोगकर्ता इंटरफ़ेस बनाने में सक्षम होंगे, जो इस तरह दिखाई देगा:

सामान्य तौर पर, यदि आप FlutterActivity का उपयोग करके उत्पन्न एंड्रॉइड प्रोजेक्ट के अंदर देखते हैं और AndroidManifest.xml फ़ाइल खोलते हैं, तो आप पाएंगे कि वहां केवल एक ही गतिविधि है, उदाहरण के लिए, FlutterActivity । लेकिन इस लेख में, हम फ़्लटर में गतिविधि के लिए उपयोगकर्ता इंटरफ़ेस डिज़ाइन करने पर ध्यान केंद्रित करेंगे। कैसे? मचान का उपयोग करना (संलग्न। मचान )।

पाड़

पाड़ विगेट्स का एक संग्रह है जो नेत्रहीन रूप से एक गतिविधि के लिए उपयोगकर्ता इंटरफ़ेस का प्रतिनिधित्व करता है। आमतौर पर, एक गतिविधि का उपयोग एकल स्क्रीन को प्रदर्शित करने के लिए किया जाता है, जिसमें कई दृश्य घटक होते हैं, जैसे कि टूलबार, मेनू, साइड मेनू, स्नैक बार, एफएबी, आदि। और FrameLayout उपयोग गतिविधि में टुकड़ों के लिए एक कंटेनर के रूप FrameLayout किया जाता है। पाड़ में, यह सब विगेट्स के रूप में दर्शाया गया है।

याद रखें, स्पंदन में कोई भी घटक एक विजेट है ।

ऊपर की छवि पाड़ के घटकों को प्रदर्शित करती है, जो साइड मेनू, निचला पैनल, टूलबार, सामग्री क्षेत्र प्रदर्शित करने के लिए एक एपीआई प्रदान करती है।

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

 import 'package:flutter/material.dart'; void main() => runApp(new MaterialApp( home: new Scaffold( ), )); 

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

 void main() => runApp(new MaterialApp( home: new Scaffold( backgroundColor: Colors.yellowAccent, ), )); 

अब आपको अपने एप्लिकेशन की पूरी तरह से पीली स्क्रीन दिखाई देगी। आप अन्य पाड़ संपत्तियों के साथ खेल सकते हैं, जिसकी एक पूरी सूची आधिकारिक दस्तावेज में मिल सकती है।

अब हम जानते हैं कि मचान कैसे बनाएं। आइए एक-एक करके इसके बुनियादी गुणों का पता लगाएं।

1. AppBar (टूलबार)

AppBar अनिवार्य रूप से वही Toolbar जिसका उपयोग हम अपनी गतिविधि में करते हैं। चित्र दिखाता है कि AppBar गुण कहां प्रदर्शित किए जाते हैं ।

• अग्रणी : विजेट जो शीर्षक से पहले दिखाई देता है। यह हैमबर्गर मेनू आइकन या बैक बटन हो सकता है।

  
  

• शीर्षक : Text विजेट में लिपटा एक टूलबार शीर्षक।

  
  

• क्रियाएँ : यह menu.xml के बराबर है जिसमें हम मेनू आइटम प्रदर्शित करने के लिए <item/> का एक सेट बनाते हैं। क्रिया गुण मेनू में प्रदर्शित करने के लिए विगेट्स की एक सूची को स्वीकार करता है। आमतौर पर, इन विगेट्स को IconButtons के रूप में दर्शाया जाता है , जो <item/> बराबर होते हैं।

  
  

• नीचे : आमतौर पर AppBar के तहत स्थित एक TabBar लिए उपयोग किया जाता है।

  
  

• FlexSpace : इस विजेट CollapsingToolbarLayout (बंधनेवाला उपकरण पट्टी) प्रभाव बनाने के लिए प्रयोग किया जाता है।

  
  

इस प्रकार, आप एक आइकन, शीर्षक और मेनू के साथ एक साधारण Appbar बना सकते हैं:

 import 'package:flutter/material.dart'; void main() => runApp(new MaterialApp( home: new Scaffold( backgroundColor: Colors.yellowAccent, appBar: new AppBar( leading: new Icon(Icons.menu), title: new Text("My Title"), actions: <Widget>[ new IconButton( icon: new Icon(Icons.shopping_cart), onPressed: () {}, ), new IconButton( icon: new Icon(Icons.monetization_on), onPressed: () {}, ) ], ), ), )); 

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

एक व्यावहारिक अभ्यास के रूप में, आप AppBar के बाकी गुणों का अध्ययन कर सकते हैं और उनके साथ काम कर सकते हैं।

2. शरीर (किसी भी दृश्य घटक के लिए कंटेनर)

यह मचान का मुख्य घटक है। यह एंड्रॉइड में फ्रैगमेंट कंटेनर के समान काम करता है। कंटेनर क्षेत्र में प्रदर्शित करने के लिए एक विजेट आवश्यक है। यह वह क्षेत्र है जहां हम उपयोगकर्ता को मुख्य सामग्री प्रदर्शित करते हैं। हमारे उदाहरण में, सादगी के लिए, हम शरीर में लाल जोड़ देंगे। वास्तविक जीवन में, पृष्ठभूमि के रंग के अलावा, कई अन्य विगेट्स का उपयोग किया जाता है, उदाहरण के लिए, ListView, Row, Column, Stack, आदि।

 import 'package:flutter/material.dart'; void main() => runApp(new MaterialApp( home: new Scaffold( backgroundColor: Colors.yellowAccent, appBar: new AppBar( leading: new Icon(Icons.menu), title: new Text("My Title"), actions: <Widget>[ new IconButton( icon: new Icon(Icons.shopping_cart), onPressed: () {}, ), new IconButton( icon: new Icon(Icons.monetization_on), onPressed: () {}, ) ], ), body: new Container( color: Colors.red, ), ), )); 

शरीर को AppBar, FAB और साइडबार के पीछे प्रदर्शित किया जाता है। यद्यपि हमने स्कैफोल्ड के लिए एक पीले रंग की पृष्ठभूमि को लागू किया था, स्क्रीन पर एक लाल रंग का रंग प्रदर्शित किया जाता है, जो स्कैफोल्ड पृष्ठभूमि को ओवरलैप करता है।

3. दराज (DrawerLayout)

यह विजेट DrawerLayout में एक DrawerLayout है जो एप्लिकेशन के नेविगेशन लिंक को प्रदर्शित करने के लिए गतिविधि के बाईं ओर से DrawerLayout करता है।

दराज का उपयोग आमतौर पर Scaffold.drawer संपत्ति के साथ किया जाता है। Android की तरह, हम DrawerLayout अंदर NavigationView उपयोग करते हैं। नीचे दी गई तालिका Android और स्पंदन में समतुल्य दृश्य घटकों को दिखाती है।

ड्राअर विजेट का चाइल्ड कंपोनेंट आमतौर पर एक लिस्ट व्यू होता है, जिसका पहला तत्व ड्राअरहेडर होता है , जो वर्तमान उपयोगकर्ता के बारे में जानकारी प्रदर्शित करता है। बाकी सूची आइटम आमतौर पर ListTiles का उपयोग करके बनाए जाते हैं । निम्न कोड दिखाता है कि कैसे ड्राअर बनाया जाता है:

 import 'package:flutter/material.dart'; void main() => runApp(new MaterialApp( home: new Scaffold( backgroundColor: Colors.yellowAccent, appBar: new AppBar( title: new Text("My Title"), actions: <Widget>[ new IconButton( icon: new Icon(Icons.shopping_cart), onPressed: () {}, ), new IconButton( icon: new Icon(Icons.monetization_on), onPressed: () {}, ) ], ), drawer: new Drawer( child: new ListView( children: <Widget>[ new DrawerHeader( child: new Text("Drawer Header"), decoration: new BoxDecoration( color: Colors.blue, ), ), new Text("Item 1"), new Text("Item 2"), new Text("Item 3"), new Text("Item 4"), new Text("Item 5"), new Text("Item 6"), ], ), ), ), )); 

यह वह परिणाम है जो आपको मिलना चाहिए। यह ध्यान देने योग्य है कि जब AppBar में पाड़ विजेट जोड़ा जाता है, तो हैमबर्गर मेनू आइकन स्वचालित रूप से जोड़ा जाता है, इसलिए अन्य सभी आइकन हटाए जाने चाहिए।

इस विजेट के बारे में अधिक जानकारी के लिए, आप दस्तावेज़ से व्यावहारिक उदाहरण या इस विषय पर एक अलग लेख से परिचित हो सकते हैं।

4. बॉटनवीगेशनबेर (बॉटनवीगेशन व्यू)

एप्लिकेशन के निचले भाग में प्रदर्शित सामग्री विजेट, TextNavigationBar में पाठ और आइकन के रूप में कई तत्व होते हैं।

द बॉटनैविगेशन बायर को आमतौर पर स्कैफोल्ड.बॉटोमनैविगेशन बायर प्रॉपर्टी का उपयोग करके लागू किया जाता है।

एंड्रॉइड पर, आप app:menu="@menu/my_navigation_items" प्रॉपर्टी का उपयोग करके BottomNavigationView में मेनू आइटम को परिभाषित करते हैं app:menu="@menu/my_navigation_items" , जहां my_navigation_items <item/> में सभी मेनू आइटमों की एक सूची है। स्पंदन items प्रॉपर्टी items उपयोग करता है, जो कि एक तर्क के रूप में होता है BottomNavigationBarItem सूची, जिनमें से प्रत्येक में मेनू में एक आइकन, शीर्षक और पृष्ठभूमि का रंग शामिल है।

 import 'package:flutter/material.dart'; void main() => runApp(new MaterialApp( home: new Scaffold( backgroundColor: Colors.yellowAccent, appBar: ..., body:..., drawer: ..., bottomNavigationBar: new BottomNavigationBar(items: [ new BottomNavigationBarItem( icon: new Icon(Icons.home), title: new Text("Home"), ), new BottomNavigationBarItem( icon: new Icon(Icons.search), title: new Text("Search"), ) ]), ), )); 

अब हमारे पास एक बॉटनैविगेशनबेर है जिसमें दो मेनू आइटम हैं।

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

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

 import 'package:flutter/material.dart'; void main() => runApp(new MaterialApp( home: new Scaffold( backgroundColor: Colors.yellowAccent, appBar: new AppBar( title: new Text("My Title"), actions: <Widget>[ new IconButton( icon: new Icon(Icons.shopping_cart), onPressed: () {}, ), new IconButton( icon: new Icon(Icons.monetization_on), onPressed: () {}, ) ], ), body: new Container( color: Colors.red, ), drawer: new Drawer( child: new ListView( children: <Widget>[ new DrawerHeader( child: new Text("Drawer Header"), decoration: new BoxDecoration( color: Colors.blue, ), ), new Text("Item 1"), new Text("Item 2"), new Text("Item 3"), new Text("Item 4"), new Text("Item 5"), new Text("Item 6"), ], ), ), bottomNavigationBar: new BottomNavigationBar(items: [ new BottomNavigationBarItem( icon: new Icon(Icons.home), title: new Text("Home"), ), new BottomNavigationBarItem( icon: new Icon(Icons.search), title: new Text("Search"), ) ]), floatingActionButton: new FloatingActionButton( onPressed: (){}, child: new Icon(Icons.add), ), ), )); 

एफएबी में अब onPressed पद्धति परिभाषित नहीं है। इसलिए, बटन स्पर्श का जवाब नहीं देगा। यदि आवश्यक हो, तो आप इस घटना के लिए प्रसंस्करण जोड़ सकते हैं।

अंत में, हमें वह परिणाम मिला, जिसकी चर्चा इस लेख की शुरुआत में की गई थी।

निष्कर्ष

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