Flutter-BLoC第三讲
本篇已同步到 个人博客 ，欢迎常来。
本文为《Flutter Bloc Package》的译文，原文地址，若转载译文请注明出处。
image.png
在使用Flutter工作一段时间之后，我决定创建一个软件包以帮助我经常使用的东西：BLoC模式。
对于那些不熟悉BLoC模式的人来说，它是一种设计模式，有助于将表示层与业务逻辑分开。你在这里了解更多。
使用BLoC模式可能具有挑战性,因为需要建立对Streams和Reactive Programming的理解。但它的核心是BLoC非常简单：
BLoC 将event流作为输入，并将它们转换为state流作为输出。
image.png
我们现在可以在bloc的dart包的帮助下使用这种强大的设计模式。
该软件包抽象了模式的反应方面，允许开发人员专注于将事件(event)转换为状态(state)。
让我们从定义这些术语开始......
词汇表
Events 是Bloc的输入。它们通常是UI事件，例如按钮按下。Events被分发(dispatched)并且被转换为States。
States 是Bloc的输出。表示组件可以监听状态流 并根据给定状态重绘其自身的部分（BlocBuilder有关详细信息，请参阅参考资料）。
Transitions 发生在 调用mapEventToState之后 但在更新了bloc的state之前 调度了一个Event
现在我们了解事件和状态，我们可以看一下Bloc API。
BLOC API
mapEventToState
当一个类继承Bloc时，必须实现 mapEventToState 方法， 该函数将传入事件作为参数。
只要UI层触发一个事件，就会调用 mapEventToState。
mapEventToState 必须将该event转换为新state，并以UI层使用的Stream形式返回新状态。
dispatch
dispatch 是一个 接受 event 并触发 mapEventToState 的方法。
可以从表示层调用dispatch 或 从Bloc内部（见例子）并通知Bloc一个新 event。
initialState
initialState是处理任何事件之前的状态（在mapEventToState被调用之前）。
如果未实现，则为initialState null。
transform
transform是一个 在调用mapEventToState之前 可以重写以转换 Stream<Event> .
这允许使用distinct() 和 debounce() 的操作。
onTransition
onTransition 是一个 每次 transform 发生时都可以重写以进行处理 的方法。
调度新event 并调用mapEventToState时发生transition。
onTransition 在更新 bloc 状态之前 被调用。
这是添加特定于块的日志记录/分析的好地方
让我们创建一个counter bloc！
enum CounterEvent { increment, decrement }
class CounterBloc extends Bloc<CounterEvent, int> {
@override
int get initialState => 0;
@override
Stream<int> mapEventToState(CounterEvent event) async* {
switch (event) {
case CounterEvent.decrement:
yield currentState - 1;
break;
case CounterEvent.increment:
yield currentState + 1;
break;
}
}
}
创建一个BLoC 需要作如下操作:
- 定义所有 event 和 state
- 继承Bloc
- 重写 initialState 和 mapEventToState
在这种情况下，我们的 events 是CounterEvents ,states 是 integers
CounterBloc 转换 CounterEvents 为 integers。
我们可以通过 dispatch 来 通知CounterBloc 事件
void main() {
final counterBloc = CounterBloc();
counterBloc.dispatch(CounterEvent.increment);
counterBloc.dispatch(CounterEvent.decrement);
}
为了观察状state 的 转换（Transitions），我们可以重写onTransition。
enum CounterEvent { increment, decrement }
class CounterBloc extends Bloc<CounterEvent, int> {
@override
int get initialState => 0;
@override
void onTransition(Transition<CounterEvent, int> transition) {
print(transition);
}
@override
Stream<int> mapEventToState(CounterEvent event) async* {
switch (event) {
case CounterEvent.decrement:
yield currentState - 1;
break;
case CounterEvent.increment:
yield currentState + 1;
break;
}
}
}
现在，每当发出(dispatch)一个CounterEvent我们的Bloc将响应一个新的integer状态，我们将看到一个transition被输出到控制台。
现在让我们使用Flutter构建一个UI，并使用flutter_bloc 包将UI连接到我们的CounterBloc。
BlocBuilder
BlocBuilder是一个Flutter小部件，它需要一个Bloc和一个构建器函数。
BlocBuilder处理构建窗口小部件以响应新state。
BlocBuilder与StreamBuilder非常相似，但它有一个更简单的API来减少所需的样板代码量。
BlocProvider
BlocProvider是一个Flutter小部件，它通过 BlocProvider.of(context)为其子女提供了一个bloc。
它用作依赖注入（DI）小部件, 这样一个bloc实例 可以被提供给子树中的多个小部件。
现在让我们构建 counter App
class App extends StatefulWidget {
@override
State<StatefulWidget> createState() => _AppState();
}
class _AppState extends State<App> {
final CounterBloc _counterBloc = CounterBloc();
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: BlocProvider<CounterBloc>(
bloc: _counterBloc,
child: CounterPage(),
),
);
}
@override
void dispose() {
_counterBloc.dispose();
super.dispose();
}
}
class CounterPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
final CounterBloc _counterBloc = BlocProvider.of<CounterBloc>(context);
return Scaffold(
appBar: AppBar(title: Text('Counter')),
body: BlocBuilder<CounterEvent, int>(
bloc: _counterBloc,
builder: (BuildContext context, int count) {
return Center(
child: Text(
'$count',
style: TextStyle(fontSize: 24.0),
),
);
},
),
floatingActionButton: Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(vertical: 5.0),
child: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
_counterBloc.dispatch(CounterEvent.increment);
},
),
),
Padding(
padding: EdgeInsets.symmetric(vertical: 5.0),
child: FloatingActionButton(
child: Icon(Icons.remove),
onPressed: () {
_counterBloc.dispatch(CounterEvent.decrement);
},
),
),
],
),
);
}
}
该App小部件是StatefulWidget，负责创建和销毁 CounterBloc。
它让 CounterBloc 使用 BlocProvider 小部件可用于 CounterPage 小部件。
CounterPage小部件是StatelessWidget， 它使用BlocBuilder重建UI以响应CounterBloc的状态变化。
此时，我们已经成功地将我们的表示层与业务逻辑层分开。请注意，CounterPage窗口小部件对用户点击按钮时发生的情况一无所知。小部件只是告诉CounterBloc用户按下了递增或递减按钮。
有关更多示例和详细文档，请查看官方集团文档。
相关链接：
