Starten Sie ReactiveX von Anfang an in Dart und Flutter

Gestern sagte mein Freund etwas wie "Ich schreibe eine einfache Offline-App, ich brauche diese Streams und den ganzen Jazz nicht". Ich war verwirrt, aber ich dachte, dass es in dieser Täuschung noch andere Programmierer geben könnte.

Im Folgenden werde ich in 50 Zeilen anhand eines bekannten Beispiels zeigen, dass die Reaktivität wie folgt ist:

a) nicht über offline / online
b) sehr einfach
c) sehr gut für die Vereinfachung von fast jedem Code

Zu meinen hastigen Kritikern ,
Ich habe empfohlen, zuerst den BlocProvider für die allgemeine Entwicklung zu lesen, wenn BlocProvider davon BlocProvider , dass BlocProvider - ein Anbieter ist , der in die Schlacht BlocProvider ohne zurückzublicken. Der Verweis auf einen Artikel befindet sich auf der Seite von flutter_bloc in der ersten Zeile der Beschreibung.

Ein bekanntes Beispiel ist „Ein Zähler“, der beim Erstellen des Flutter-Projekts generiert wird, und der ein guter Ausgangspunkt für die Demonstration vieler Übungen ist. Daher enthält MyHomePage extends StatefulWidget die MyHomePage extends StatefulWidget , die Methode _incrementCounter für den Befehl increment und setState für das setState gesamten Hierarchie von Widgets.

Lassen Sie uns mit Hilfe der rxdart Bibliothek und einigen einfachen Schritten die Reaktivität einführen:

Fügen wir eine Bibliothek in pubspec.yaml hinzu

 dependencies: ... rxdart: 0.22.2 

Lassen Sie uns die Architektur eines Zählers ändern und ein Ereignis hinzufügen

 class _Counter { int _count; int get count => _count; _Counter(this._count) : this.onCounterUpd = BehaviorSubject<int>.seeded(_count); /// Here is the event. final BehaviorSubject<int> onCounterUpd; /// Increment now fires an event. Future incrementCounter() async { onCounterUpd.add(++_count); } } final _counter = _Counter(5); 

Machen wir die Klasse StatelessWidget

 class MyHomeRxPage extends StatelessWidget { final title; /// ! Look it can be constant one now. const MyHomeRxPage({Key key, this.title}) : super(key: key); ... 

Lassen Sie uns ein Widget in einen StreamBuilder einbinden und die Methode eines Aufrufs von increment ändern.

  StreamBuilder<int>( stream: _counter.onCounterUpd, builder: (context, snapshot) { return Text( '${snapshot.data}', style: Theme.of(context).textTheme.display1, ); }), ... floatingActionButton: FloatingActionButton( onPressed: _counter.incrementCounter, ... 

Das ist alles In vollem Umfang sieht es so aus:

 import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; import 'package:rxdart/rxdart.dart'; class _Counter { int _count; int get count => _count; _Counter(this._count) : this.onCounterUpd = BehaviorSubject<int>.seeded(_count); /// event final BehaviorSubject<int> onCounterUpd; /// fire an event Future incrementCounter() async { onCounterUpd.add(++_count); } } final _counter = _Counter(5); class MyHomeRxPage extends StatelessWidget { final title; const MyHomeRxPage({Key key, this.title}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ StreamBuilder<int>( stream: _counter.onCounterUpd, builder: (context, snapshot) { return Text( 'You have pushed the button ${snapshot.data} times:', ); }), // Text( // 'You have pushed the button this many times:', // ), StreamBuilder<int>( stream: _counter.onCounterUpd, builder: (context, snapshot) { return Text( '${snapshot.data}', style: Theme.of(context).textTheme.display1, ); }), ], ), ), floatingActionButton: FloatingActionButton( onPressed: _counter.incrementCounter, tooltip: 'Increment', child: Icon(Icons.add), ), // ); } } 

Jetzt ist der Code reaktiv, lakonisch, frei von unnötigen Neuzeichnungen und leicht erweiterbar. Wenn zum Beispiel der Text eines anderen Widgets geändert werden muss und sich der Zähler ändert, genügt Folgendes:

  StreamBuilder<int>( stream: onCounterUpd, builder: (context, snapshot) { return Text( 'You have pushed the button ${snapshot.data} times:', ); }), // Text( // 'You have pushed the button this many times:', // ), 

und voila!

Versuchen Sie dies zum Vergleich mit InheritedWidget oder mit einem anderen Muster.

Also, ich hoffe, ich habe das gezeigt

• Die Reaktivität ist sehr einfach. Viel einfacher als InheritedWidgets , BlocProvider usw.
• Bei der Reaktivität geht es nicht um Offline / Online. Es geht um Architektur. In einigen einfachen Fällen müssen nicht einmal zusätzliche Klassen eingegeben werden, um es zu verwenden.
• Die Reaktivität ist sympathische Benutzeroberfläche, schnelle Funktionserweiterung, elegante Aufteilung des Codes auf Ebenen aller Art: MVC, MVP, MVI, MVVM, MVU - was immer Sie wollen.

→ Code: (Zweig iter_0004_rxdart )

Viel Glück beim Programmieren.