एक साधारण उदाहरण के साथ बीएलओसी पैटर्न

और फिर से क्लासिक फ्लटर काउंटर उदाहरण का उपयोग करके बीएलओसी के बारे में।

प्रतिक्रियाशील प्रोग्रामिंग के बारे में कुछ लेख पढ़ना और अनुप्रयोगों में बीएलओसी पैटर्न का उपयोग करना, मुझे एहसास हुआ कि मैं कुछ के साथ नहीं पकड़ रहा था। हमेशा की तरह, सब कुछ के लिए पर्याप्त समय नहीं है, लेकिन अब, एक खाली समय था और ताकत है - फैसला किया, मैं बीएलओसी पैटर्न के साथ सबसे सरल फ़्लटर एप्लिकेशन लिखूंगा।

कैट एनिमेशनका एप्लिकेशन और स्पष्टीकरण के तहत मैंने इसे इस तरह क्यों लिखा। बहुत दिलचस्प समुदाय की राय है।

हां, हमने पहले ही इस पैटर्न के बारे में कई बार लिखा है, लेकिन वैसे भी, इसका उपयोग करने के लिए कोई स्पष्ट निर्देश और नियम नहीं हैं, और अक्सर यह सवाल उठता है कि आवेदन में तर्क को सही ढंग से कैसे लागू किया जाए।

लेख का उद्देश्य अपने लिए थोड़ा स्पष्ट करना है और उम्मीद है, पाठकों के लिए।

इसलिए, पैटर्न की परिभाषा, जैसा कि Google इंजीनियरों द्वारा आवाज दी गई थी - BLOC एक सरल वर्ग है जिसमें:

1. सभी आउटपुट स्ट्रीम
2. सभी इनपुट धाराएँ हैं
3. इस वर्ग को विज़ुअल इंटरफ़ेस से तर्क निकालना चाहिए

इस पैटर्न को लागू करने के लिए, हम, यदि आवश्यक हो, rxdart लाइब्रेरी का उपयोग कर सकते हैं, लेकिन हम इसका उपयोग नहीं कर सकते।

यह प्रतिक्रियाशीलता को नहीं हटाएगा जैसा कि आप सोच सकते हैं। जैसा कि पैकेज के निर्माता स्वयं लिखते हैं, rxdart स्ट्रीम के साथ काम करने में डार्ट भाषा की पहले से निर्मित समृद्ध विशेषताओं में कार्यक्षमता जोड़ता है।

आवेदन

इसलिए, हम एप्लिकेशन को काउंटरों के साथ लेते हैं, जो प्रोजेक्ट बनाते समय स्वचालित रूप से बनाया जाता है और BLoC पैटर्न का उपयोग करके इसे फिर से लिखने का प्रयास करता है।

उद्देश्यों:

1. विजेट से सभी तर्क निकालें
2. BLoC वर्ग में, केवल इनपुट स्ट्रीम और आउटपुट केवल आउटपुट स्ट्रीम प्राप्त करते हैं। उदाहरण के लिए, फ़ंक्शन ने लेख में टिप्पणियों में प्रस्तावित किया है।

यह हमें सूट नहीं करता है, क्योंकि यह केवल कक्षा को पारित करने के नियम का उल्लंघन करता है।

समाधान:

1. हम विगेट्स से सभी लॉजिक को हटा देते हैं। हम स्टेटलेस क्लास बनाते हैं और सेटस्टेट के साथ स्टेट को अपडेट करना बंद कर देते हैं।
2. हम अंतर्निहित विजेट का उपयोग करके विभिन्न स्थानों पर मीटर रीडिंग प्रदर्शित करते हैं, जो विशेष रूप से स्ट्रीम - स्ट्रीमब्यूलर से डेटा प्रदर्शित करने के लिए बनाई गई है।

class MyHomePage extends StatelessWidget { CounterBloc counterBloc = CounterBloc(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: StreamBuilder<int>( stream: counterBloc.pressedCount, builder: (context, snapshot) { return Text( 'Flutter Counter Bloc Example - ${snapshot.data.toString()}', ); }), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'You have pushed the button this many times:', ), StreamBuilder<int>( stream: counterBloc.pressedCount, builder: (context, snapshot) { return Text( '${snapshot.data.toString()}', style: Theme.of(context).textTheme.display1, ); }), ], ), ), floatingActionButton: Container( width: 100.0, height: 100.0, child: FloatingActionButton( onPressed: () { counterBloc.incrementCounter.add(null); }, tooltip: 'Increment', child: Text( "+ \n send \n to BLoC", textAlign: TextAlign.center, ), ), ), ); } } 

1. हम एक अलग वर्ग बनाते हैं जहाँ हम बीएलओसी पैटर्न लागू करते हैं:
   3.1 सभी वर्ग गुण और विधियाँ छिपी हुई हैं।
   3.2 राज्य प्राप्त करने और स्थानांतरित करने के लिए, हम उन धाराओं का उपयोग करते हैं जो गेटर्स का उपयोग करके बाहर से दिखाई देते हैं (लेकिन यहां उनके बारे में एक अच्छा लेख है )।

 class CounterBloc { int _counter; CounterBloc() { _counter = 1; _actionController.stream.listen(_increaseStream); } final _counterStream = BehaviorSubject<int>.seeded(1); Stream get pressedCount => _counterStream.stream; Sink get _addValue => _counterStream.sink; StreamController _actionController = StreamController(); StreamSink get incrementCounter => _actionController.sink; void _increaseStream(data) { _counter += 1; _addValue.add(_counter); } void dispose() { _counterStream.close(); _actionController.close(); } } 

यह सब है, हमें एक काम करने का उदाहरण मिला है जिसमें हम स्ट्रीम द्वारा राज्य प्राप्त करते हैं और दृश्य भाग में किसी भी तर्क को लागू किए बिना आवश्यक विजेट में डेटा प्रदर्शित करते हैं।

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

नोट 1: ध्यान दें कि हम वर्ग का एक उदाहरण बना रहे हैं> काउंटरब्लॉक काउंटरबॉक = काउंटरबोलोक (); और फिर हम इससे डेटा प्राप्त करते हैं। अगर हमें अलग-अलग स्क्रीनों पर (स्पेसल क्लासेस में) इस डेटा की जरूरत है, तो हम ट्रांसफर के लिए इनहेरिटेड विजेट्स का इस्तेमाल कर सकते हैं या अपनी क्लास के लिए सिंगलटन बना सकते हैं।

Github उदाहरण कोड

सभी को अच्छा कोडिंग!

विस्तार

अगली कड़ी में, हम विभिन्न स्क्रीन पर राज्य को स्थानांतरित करते हैं, फोन की स्थायी मेमोरी में डेटा को सहेजते हैं, BLoC https://habr.com/en/post/485002/ का परीक्षण करते हैं।