从一开始就在dart和Flutter中开始使用ReactiveX

昨天，我的朋友说了些类似“我正在编写简单的脱机应用程序，不需要这些流和爵士乐”的内容。 我很困惑，但是我想，这种错觉中可能还有其他编码人员。

在下面的示例中，我将逐字显示50行，在一个已知示例中，反应性是：

a）与离线/在线无关
b）很容易
c）非常适合简化几乎所有代码

对于我的仓促批评者 ，
谁急忙奋战而又不回头，假设BlocProvider是提供者 ，我建议您先阅读有关常规开发的基本文章 。 对文章的引用位于flutter_bloc的页面上，位于描述的第一行。

众所周知的一个例子是“计数器”，它是在Flutter项目创建时生成的，它是演示许多实践的良好起点。 因此，它包含MyHomePage extends StatefulWidget ，方法_incrementCounter用于增量命令）和setState用于重绘窗口小部件的整个层次结构）。

让我们借助rxdart库和一些简单的步骤来介绍反应性：

让我们在pubspec.yaml中添加一个库

 dependencies: ... rxdart: 0.22.2 

让我们更改计数器的架构并添加事件

 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); 

让我们制作类StatelessWidget

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

让我们在StreamBuilder中包装一个小部件，并更改一个增量方法的调用。

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

仅此而已。 全部看起来像这样：

 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), ), // ); } } 

现在，该代码是反应性的，简洁的，没有不必要的重绘且易于扩展的代码。 例如，如果有必要更改其他窗口小部件的文本，则在更改计数器时，只需执行以下操作：

  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:', // ), 

和瞧！

为了进行比较，请尝试使用InheritedWidget或其他模式进行此操作。

所以，我希望我能证明

• 反应性非常容易。 比InheritedWidgets ， BlocProvider等容易得多。
• 反应性与离线/在线无关。 它与建筑有关。 在某些简单情况下，甚至不必输入其他类即可使用它。
• 反应性是同情的UI，快速扩展功能，优雅地在所有类型的层上划分代码： MVC, MVP, MVI, MVVM, MVU随便什么。

→ 代码：（分支iter_0004_rxdart ）

祝您编程愉快。