Hogyan kezeljük a Flutter állapotát a BLoC mintával

Tavaly felvettem a Fluttert, és azt kell mondanom, hogy ez egy fantasztikus utazás volt eddig. A Flutter a Google fantasztikus keretrendszere kiváló minőségű alkalmazások kidolgozásához Android és iOS rendszerekhez.

Mint szinte minden alkalmazás készítésénél, itt is mindig szükség van az alkalmazás állapotának kezelésére. Fontos, hogy az államigazgatást hatékonyan kezeljék, hogy elkerüljék a technikai adósság felhalmozódását, különösen akkor, ha az alkalmazás növekszik és összetettebbé válik.

A Flutterben az összes felhasználói felület összetevő widget. Amint összeállítja ezeket a modulokat a fantasztikus alkalmazás létrehozásához, egy mélyen beágyazott kütyü fa lesz a végén. Ezeknek a widgeteknek valószínűleg meg kell osztaniuk az alkalmazás állapotát egymással.

Ebben a cikkben megtudjuk, hogyan kell kezelni a Flutter állapotát a BLoC minta használatával.

Az államvezetés a Flutterben néhány különböző módon érhető el:

Örökölt Widget : Lehetővé teszi az adatok terjesztését a gyermek widgetjeire, és a widgetek újjáépülnek, amikor az alkalmazás állapotában változás történik. Az InheritedWidget alaposztály használatának hátránya, hogy állapota végleges, és ez problémát vet fel, ha módosítani akarja állapotát.

Határozott modell : Ez egy külső csomag, amely az InheritedWidget tetejére épül, és valamivel jobb módot kínál az állapot eléréséhez, frissítéséhez és módosításához. Ez lehetővé teszi, hogy egyszerűen átadhasson egy adatmodellt egy szülő Widgetről leszármazottainak. Ezenkívül újjáépíti mindazokat a gyermekeket, akik a modell frissítésekor használják a modellt.

Ez teljesítményproblémát vethet fel, attól függően, hogy egy modell hány ScopedModelDescendanttal rendelkezik, mivel frissítéskor újjáépítik őket.

Ezt a problémát úgy lehet kijavítani, hogy a ScopedModelt több modellre bontja, így finomabb szemcsésségű függőségeket kap. A rebuildOnChangezászló beállítása úgy falseis megoldja ezt a problémát, de magával hozza a kognitív terhelést annak eldöntésében, hogy melyik widgetet kell újjáépíteni vagy sem.

Redux : Igen! A Reacthez hasonlóan itt is van egy Redux csomag, amely könnyedén létrehozhat és felhasználhat egy Redux üzletet a Flutterben. A JavaScript megfelelőjéhez hasonlóan itt is van néhány sor kazánlap kód, valamint a műveletek és a reduktorok oda-vissza útja .

Írja be a BLoC mintát

A Business Logic Component (BLoC) minta a Google által létrehozott és a Google I / O '18 -on bejelentett minta. A BLoC minta a reaktív programozást használja az alkalmazáson belüli adatfolyam kezelésére.

A BLoC közvetítőként áll az alkalmazásban lévő adatforrások (pl. API válasz) és az adatokra szoruló kütyük között. Fogadja az események / adatok folyamát a forrásból, kezeli az összes szükséges üzleti logikát, és közzéteszi az adatmódosítások folyamatait az őket érdeklő kütyük számára.

Egy tömbben van két egyszerű komponensek: mosogatók és Streams , mindkettő által nyújtott StreamController . Az esemény- / adatbeviteli adatfolyamokat hozzáadja egy mosogatóhoz, és adatfolyamként hallgatja őket egy adatfolyamon keresztül .

A StreamController elérhető a ‘dart:async’könyvtáron keresztül, vagy PublishSubject , ReplaySubject vagy BehaviourSubject néven a rxdartcsomagon keresztül .

Az alábbiakban egy kódrészlet mutat be egy egyszerű BLoC-t:

import 'dart:async'; // import 'package:rxdart/rxdart.dart'; if you want to make use of PublishSubject, ReplaySubject or BehaviourSubject. // make sure you have rxdart: as a dependency in your pubspec.yaml file to use the above import class CounterBloc { final counterController = StreamController(); // create a StreamController or // final counterController = PublishSubject() or any other rxdart option; Stream get getCount => counterController.stream; // create a getter for our Stream // the rxdart stream controllers returns an Observable instead of a Stream void updateCount() { counterController.sink.add(data); // add whatever data we want into the Sink } void dispose() { counterController.close(); // close our StreamController to avoid memory leak } } final bloc = CounterBloc(); // create an instance of the counter bloc //======= end of CounterBloc file //======= somewhere else in our app import 'counter_bloc.dart'; // import the counter bloc file here @override void dispose() { bloc.dispose(); // call the dispose method to close our StreamController super.dispose(); } ... @override Widget build(BuildContext context) { return StreamBuilder( // Wrap our widget with a StreamBuilder stream: bloc.getCount, // pass our Stream getter here initialData: 0, // provide an initial data builder: (context, snapshot) => Text('${snapshot.data}'), // access the data in our Stream here ); } ...

A BLoC egy egyszerű Dart osztály. A fenti kódrészletben létrehoztunk egy CounterBlocosztályt, és abban, StreamControlleramelyet meghívtunk counterController. Létrehoztunk egy getter mi Áramlat nevű getCount, egy updateCountmódszer, amely hozzáteszi, az adatok a mi Sink, ha hívják, és a disposemódszer, hogy lezárja a StreamController.

A Stream adataihoz való hozzáféréshez létrehoztunk egy StreamBuilderwidgetet, a Stream-et átadtuk a streamtulajdonának, és a builderfunkciójában lévő adatokhoz jutottunk hozzá .

A BLoC megvalósítása

Átalakítjuk az alapértelmezett Flutter minta alkalmazást egy BLoC használatára. Menjünk, és hozzunk létre egy új Flutter alkalmazást. Futtassa a terminálon a következő parancsot:

$ flutter create bloc_counter && cd bloc_counter

Nyissa meg az alkalmazást a kedvenc szerkesztő és hozzon létre három lib mappában: counter.dart, counter_provider.dartés counter_bloc.dart.

A mi CounterProvidertartalmazni fog egy egész számot és egy módszert annak növelésére. Adja hozzá a következő kódot a counter_provider.dartfájlhoz:

class CounterProvider { int count = 0; void increaseCount() => count++; }

Ezután megvalósítjuk a BLoC számlálónkat. Adja hozzá az alábbi kódot a counter_block.dartfájljához:

Osztályunkban a CounterBlocfenti mintakódunk egy részét használtuk. A 7. vonalon példányosítottuk az CounterProviderosztályunkat, és a updateCountmetódusban meghívtuk a szolgáltató metódusát a számolás növelésére, majd a 13. vonalon átadtuk a számlálást a Sink-nek.

Cserélje le a main.dartfájlban lévő kódot az alábbi kódra. Az alábbi kódban egyszerűen eltávolítottuk az alapértelmezett számláló kód nagy részét, amelyet áthelyezünk a counter.dartfájlunkba. Amikor a incrementCountermetódust meghívjuk, meghívjuk a BLoC updateCountmódszerét, amely frissíti a számlálást és hozzáadja a Sink-hez.

A BLoC mostantól adatokat fogad és továbbít. Hozzáférhetünk ezekhez az adatokhoz, és a StreamBuilder segítségével megjeleníthetjük őket a képernyőn . Bármelyik widgetet, amelyre az adatokra van szükség, egy StreamBuilder widgetbe csomagoljuk, és átadjuk neki az adatokat tartalmazó adatfolyamot. Adja hozzá a következő kódot a counter.dartfájlhoz:

A fenti kódban van egy állapotfigyelő widgetünk. Állami osztályunkban, a 13. vonalon, meghívjuk blokkunk eldobási módszerét, így az adatfolyam-vezérlő bezárható, amikor a widgetet eltávolítják a fáról.

A 19. vonalon visszaküldünk egy StreamBuilder modult és a 20. sort, átadjuk neki az adatfolyamunk getter-jét, és egy kezdeti adatot is a 21. vonalon. A StreamBuilder-nek van egy is, builderamely a snapshot. A 30. vonalon elérjük és megjelenítjük az adatokat a pillanatképben.

Futtassa az alkalmazást az alábbi parancs futtatásával. Győződjön meg róla, hogy fut egy emulátor.

$ flutter run

Ha fut az alkalmazás, kattintson a plusz ikonra, és nézze meg, hogyan növekszik a számláló minden kattintással.

Együtt tudtuk megvalósítani a BLoC legegyszerűbb formáját a Flutterben. A koncepció a felhasználási esettől függetlenül ugyanaz marad.

Remélem, hasznosnak találta ezt a cikket. Kérjük, tegye meg és ossza meg, hogy mások is megtalálják ezt a cikket. Kérdésekkel vagy csevegésre keress fel a Twitteren @developia_.