स्पंदन। पेशेवरों और विपक्ष

सबसे पहले, आइए थोड़ी सी बात करें कि स्पंदन क्या है। यह Google से मोबाइल एप्लिकेशन बनाने की एक रूपरेखा है। यह क्रॉस-प्लेटफ़ॉर्म है और आपको 3 ऑपरेटिंग सिस्टम के लिए बनाई गई परियोजना को संकलित करने की अनुमति देता है:

• एंड्रॉयड
• आईओएस
• फ्यूशिया

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

स्पंदन को सक्रिय रूप से Google द्वारा बढ़ावा दिया जाता है, धीरे-धीरे लोकप्रियता प्राप्त कर रहा है और, सबसे अधिक संभावना है, वर्तमान में उपयोग में आने वाले अन्य क्रॉस-प्लेटफ़ॉर्म विकास टूल (रिएक्ट नेटिव, ज़ैमरीन) को भीड़ देना जारी रखेगा, खासकर अगर फुकिया व्यापक रूप से वितरित किया गया है। यह देखते हुए कि Google इस ऑपरेटिंग सिस्टम को एंड्रॉइड के लिए एक प्रतिस्थापन के रूप में रखता है, जितनी जल्दी या बाद में स्पंदन मूल एंड्रॉइड विकास को सुपरसीड करेगा। इसलिए, संभावनाएं और सक्रिय विकास स्पंदन के मुख्य लाभ हैं।

+ परिप्रेक्ष्य और सक्रिय विकास

आइए देखें कि यह कैसे काम करता है।

डार्ट प्रोग्रामिंग भाषा में, एक मोबाइल एप्लिकेशन चित्रमय इंटरफ़ेस और काम के पूरे तर्क के विवरण के साथ बनाया गया है। कार्य का परिणाम मूल एप्लिकेशन में जोड़ा जाता है, जैसे चित्र, फ़ॉन्ट और जैसे (निश्चित रूप से, यह प्रक्रिया स्वचालित है)।

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

ध्यान दें कि फ़्लटर के एक मिन्स यहां से निम्नानुसार हैं:

- अंतिम स्थापना पैकेज बड़ा है, क्योंकि डार्ट वर्चुअल मशीन को इसमें जोड़ा जाता है।

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

वर्चुअल मशीन का अपना ग्राफिक्स इंजन होता है, यह स्क्रीन, डायलॉग्स, टुकड़े आदि के बीच सभी बदलावों के साथ एप्लिकेशन इंटरफ़ेस को खींचता है। इसमें, फ्लटर के तहत विकास ज़ामरीन और रिएक्ट नेटिव के साथ विकास से काफी अलग है, जो वास्तविक एंड्रॉइड और आईओएस घटकों का उपयोग करते हैं। उनके मामले में, प्लेटफ़ॉर्म-विशिष्ट घटकों का उपयोग करना असंभव है (यदि ऐसी कोई आवश्यकता है, तो आपको यूआई के दो संस्करण बनाने होंगे)। फ़्लटर के साथ एक डिज़ाइन चुनते समय, यह एक मंच (उदाहरण के लिए, एंड्रॉइड) पर ध्यान केंद्रित करने के लिए पर्याप्त है। IOS के लिए प्रोजेक्ट बनाते समय, आपको एक मानक Android इंटरफ़ेस दिखाई देगा। यह थोड़ा अजीब और अप्रत्याशित लगेगा, लेकिन काफी कार्यात्मक (बाद में इंटरफ़ेस में सुधार किया जा सकता है)।

+ स्वयं के ग्राफिक्स इंजन (Android और iOS के लिए अलग से कोई इंटरफ़ेस बनाने की आवश्यकता नहीं है)

अब छापों के बारे में।

एंड्रॉइड से फ़्लटर तक कई अनुप्रयोगों को पोर्ट करते समय, हमने कुछ अंतरों को नोट किया, जिन्हें प्लस और माइनस दोनों माना जा सकता है।

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

- इंटरफ़ेस कोड का उपयोग करके बनाया गया है, जो तर्क और डिजाइन के बीच की रेखा को अधिक पतला बनाता है।

दूसरी ओर, यह दृष्टिकोण स्क्रीन को अलग-अलग घटकों में विभाजित करना आसान बनाता है। वास्तव में, एम्बेडेड इंटरफ़ेस तत्वों के किसी भी ब्लॉक को केवल कुछ चरणों में एक अलग विजेट में स्थानांतरित किया जा सकता है, और यह कस्टम व्यू और टुकड़े बनाने की तुलना में बहुत आसान है।

+ इंटरफ़ेस को आसानी से अलग मॉड्यूल में विभाजित किया गया है

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

चलो तीन टैब बनाते हैं:

1) सबसे पहले - पाठ और स्लाइडर्स के साथ पाठ के आकार और रंग को समायोजित करने के लिए
2) दूसरे के लिए एक डाउनलोड करने योग्य छवि जोड़ें (प्रगति संकेतक के साथ)
3) तीसरे स्थान पर एक उदाहरण सूची

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

अब स्रोत कोड पर विचार करें जो इस लेआउट को लागू करता है:

void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Home Page'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } 

यह कोड टुकड़ा लगभग किसी भी स्पंदन अनुप्रयोग के लिए मानक है (यह परियोजना के साथ मिलकर बनाया गया है)।

MyApp, एप्लिकेशन का एक वर्ग है, जो कि MaterialApp बनाते समय सामान्य मापदंडों का वर्णन करता है: एप्लिकेशन का नाम, फोंट, रंग और शैली। आवेदन की मुख्य स्क्रीन यहां भी इंगित की गई है (हमारे लिए, यह MyHomePage है)।

आइए एक महत्वपूर्ण नोट करें: स्पंदन विगेट्स को दो प्रकारों में विभाजित किया गया है:

1) स्टेटफुलविजेट
2) स्टेटलेसविजेट

StatefulWidget का वर्णन करने के लिए दो वर्गों की आवश्यकता होती है: विजेट का वर्ग और उसके राज्य का वर्ग (जिसमें मुख्य कार्य होगा)।

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

अब _MyHomePageState पर विचार करें:

 class _MyHomePageState extends State<MyHomePage> { int _currentIndex = 0; double _size = 14; double _r = 0; double _g = 0; double _b = 0; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: <Widget>[ 

धारणा में आसानी के लिए, पाठ के साथ एक टैब लाल रंग में चिह्नित किया गया है, हरे रंग में एक तस्वीर के साथ एक टैब, नीले रंग में एक सूची टैब और पीले रंग में एक नेविगेशन मेनू है। जैसा कि आप देख सकते हैं, इंटरफ़ेस को विगेट्स (और उनके सरणियों) के एक सेट के रूप में वर्णित किया गया है:

उपयोग किए गए कार्य:

  void _onTapped(int index) { setState(() { _currentIndex = index; }); } void _setTextStyle( {double size = -1, double r = -1, double g = -1, double b = -1}) { setState(() { if (size > 0) { _size = size; } if (r > 0) { _r = r; } if (g > 0) { _g = g; } if (b > 0) { _b = b; } }); } } 

आइए उन पर अधिक विस्तार से विचार करें:

onTapped - नीचे मेनू में एक टैब स्विच करते समय एक फ़ंक्शन। यह विशेष सेटस्टैट फ़ंक्शन को कॉल करता है, जो आपको नए डेटा के साथ वर्तमान विजेट को अपडेट करने की अनुमति देता है (और हमने _currentIndia वैरिएबल को अपडेट किया है)।

आइए देखें कि यह कहां लागू होता है:

 body: <Widget>[    ][_currentIndex] 

यहां हम एक सरणी के साथ काम कर रहे हैं, जहां से _currentIndex का उपयोग करते हुए स्क्रीन लेआउट विकल्पों में से एक का चयन किया जाता है, और इसे टैब में से एक के रूप में प्रतिस्थापित किया जाता है।

इसके बाद _setTextStyle फ़ंक्शन आता है। इसमें सी जैसी भाषाओं के लिए बहुत ही असामान्य विज्ञापन है।

 void _setTextStyle({double size = -1, double r = -1, double g = -1,double b = -1}) 

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

चूंकि प्रत्येक तर्क का नाम दिया गया है, हम उन्हें यादृच्छिक क्रम में ले जा सकते हैं। उदाहरण के लिए:

 _setTextStyle(size: 24, b: 255) 

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

पहला टैब:

 class TextWidget extends StatefulWidget { @override _TextWidgetState createState() => _TextWidgetState(); } class _TextWidgetState extends State<TextWidget> { double _size = 14; double _r = 0; double _g = 0; double _b = 0; @override Widget build(BuildContext context) { return Column( children: <Widget>[ Text("Example String", style: TextStyle( fontSize: _size, color: Color.fromRGBO(_r.toInt(), _g.toInt(), _b.toInt(), 1))), Container(constraints: BoxConstraints.expand(height: 32.0)), Slider( label: "${_size.toInt()} sp", value: _size, min: 10, max: 48, divisions: 38, activeColor: Colors.black, inactiveColor: Colors.grey, onChanged: (val) => _setTextStyle(size: val)), Slider( label: _r.toInt().toString(), value: _r, min: 0, max: 255, divisions: 255, activeColor: Colors.red, inactiveColor: Colors.grey, onChanged: (val) => _setTextStyle(r: val), ), Slider( label: _g.toInt().toString(), value: _g, min: 0, max: 255, divisions: 255, activeColor: Colors.green, inactiveColor: Colors.grey, onChanged: (val) => _setTextStyle(g: val), ), Slider( label: _b.toInt().toString(), value: _b, min: 0, max: 255, divisions: 256, activeColor: Colors.blue, inactiveColor: Colors.grey, onChanged: (val) => _setTextStyle(b: val), ), ], ); } } 

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

दूसरा टैब:

 class ImageWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Stack( children: <Widget>[ Center(child: CircularProgressIndicator()), Center( child: FadeInImage.memoryNetwork( placeholder: kTransparentImage, image: 'https://picsum.photos/250?image=9', ), ), ], ); } } 

तीसरा टैब:

 class ListWidget extends StatelessWidget { @override Widget build(BuildContext context) { return ListView.builder( itemCount: 25, itemBuilder: (BuildContext context, int index) { return Container( child: Text( 'entry $index', style: TextStyle(color: Colors.white), ), margin: EdgeInsets.all(16.0), padding: EdgeInsets.all(16.0), decoration: BoxDecoration( color: Colors.blue, borderRadius: BorderRadius.all( Radius.circular(16.0), ), ), ); }, ); } } 

परिवर्तित मुख्य स्क्रीन स्थिति कोड:

 class _MyHomePageState extends State<MyHomePage> { int _currentIndex = 0; Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), actions: <Widget>[ IconButton(icon: Icon(Icons.navigate_next), onPressed: next) ], ), body: <Widget>[ TextWidget(), ImageWidget(), ListWidget(), ][_currentIndex], bottomNavigationBar: BottomNavigationBar( currentIndex: _currentIndex, onTap: _onTapped, items: [ BottomNavigationBarItem( icon: new Icon(Icons.text_format), title: new Text('Text'), ), BottomNavigationBarItem( icon: new Icon(Icons.image), title: new Text('Image'), ), BottomNavigationBarItem( icon: Icon(Icons.list), title: Text('ListView'), ) ], )); } 

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

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

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

सौभाग्य से, स्कैफोल्ड को एक नियमित विजेट में जोड़ना इसके प्रदर्शन को प्रभावित नहीं करता है।

आप SafeArea (स्थिति पट्टी के लिए एक इंडेंट प्रदान करने के लिए) भी जोड़ सकते हैं। निम्नलिखित सरल रूपांतरण प्राप्त किया जाता है:

से:

 @override Widget build(BuildContext context) { return []; } 

द्वारा:

 @override Widget build(BuildContext context) { return Scaffold( body: SafeArea( child: [] ), ); } 

खैर, अब फ़्लटर के पेशेवरों और विपक्षों की चर्चा पर वापस लौटें।

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

- अस्थिरता (अभी हाल ही में बाएं बीटा)

जाहिर है, नए ढांचे का उपयोग करते समय, आपके पास मूल Android / iOS विकास की तुलना में आपके निपटान में बहुत कम पुस्तकालय हैं। हालाँकि, फ़्लटर के लिए अभी भी बहुत सारे पुस्तकालय हैं, और वे बड़ी तेजी के साथ दिखाई देते हैं। उदाहरण के लिए, 2018 की दूसरी छमाही में कई पुस्तकालयों को जोड़ा गया था, जाहिरा तौर पर, पहली स्थिर रिलीज की तैयारी में, और उससे पहले सबसे महत्वपूर्ण पुस्तकालय (Google विश्लेषिकी, फायरबेस, मैप्स, आदि) मौजूद थे।

- देशी विकास की तुलना में कम पुस्तकालय
+ सबसे महत्वपूर्ण पुस्तकालय पहले से ही हैं, नए लगातार सामने आ रहे हैं

जायजा लेने का समय है! आइए सभी पेशेवरों और विपक्षों को याद करें, तत्वों को सबसे महत्वपूर्ण प्लस से सबसे महत्वपूर्ण minuses तक व्यवस्थित करें:

+ क्रॉस-प्लेटफॉर्म
+ परिप्रेक्ष्य और सक्रिय विकास
+ सबसे महत्वपूर्ण पुस्तकालय पहले से ही हैं, नए लगातार सामने आ रहे हैं
+ अपना ग्राफिक्स इंजन
+ इंटरफ़ेस को आसानी से अलग मॉड्यूल में विभाजित किया गया है

- अंतिम स्थापना पैकेज बड़ा है, क्योंकि डार्ट वर्चुअल मशीन को इसमें जोड़ा जाता है
- इंटरफ़ेस कोड का उपयोग करके बनाया गया है, जो तर्क और डिजाइन के बीच की रेखा को अधिक पतला बनाता है
- देशी विकास की तुलना में कम पुस्तकालय (और सूचना)
- अस्थिरता (अभी हाल ही में बाएं बीटा)

आपका ध्यान के लिए धन्यवाद!