用户登录

现在在我们的 Bloc 里面,可以接收到界面上使用 Sink 输入进来的数据 .. 下面我们可以再把这个数据输出出去 .. 比如界面上这个计数用的小部件,就可以根据输出的 Stream 上的数据构建一下 ..

先在这个 CounterBloc 里面,添加一个整数类型的数据,名字可以是 _count,先让它等于 0 ..

然后再去创建一个 StreamController .. 名字是 _counterController .. 新建一个 StreamController .. 接收的数据是 int ..

下面可以再添加一个 getter 方法 .. 类型是 Stream .. int .. 一个 Stream,上面的数据类型是整数.. 这个 getter 的名字叫 count .. 它的值是新建的这个 _counterController 上的 stream ..

不需要的 StreamController 可以关掉 .. 在 disponse 里面,执行一下 _counterController 上的 close ..

然后再修改一下这个 onData 方法 .. 在这个 CounterBloc 里面,我们监听了 _counterActionController 控制的 stream .. 有数据就会执行这个 onData 方法 ..

在这个方法里,我们可以让 _count 的值等于 data 的值再加上 _count 的值 ..

然后再直接用一下 _counterController 上的 add 方法,往它控制的 stream 上添加一个数据,数据的值就是这个 _count ..

下面我们可以利用一下这个 stream 上的数据去构建一个小部件 ..

找到这个 ConterHome ..

这个小部件现在我们要用一下 StreamBuilder 来构建 .. 设置一下它的 initialData 的值,把它设置成 0 ... 它还需要一个 stream .. 这里要用的 stream 就是 _counterBloc 上的 count ...

小部件需要使用一个 builder 方法构建 .. 这个方法接收一个 context 参数 ... 还有一个 snapshot 参数 ..

方法里面 return 的东西就是之前我们用的这个 ActionChip .. 它的 label 的值,现在可以换成 snapshot 上的 data .. 这个 snapshot.data 就是 _counterBloc 里的 count 这个 stream 上的数据 ..

到模拟器上再试一下 ..

按一下动作按钮 ... 界面上的数字就会增加 1 ...

同样按一下这个 ActionChip .. 它上面显示的数字也会增加 1 ...

按下按钮,会使用 coutner 这个 sink 往它的 stream 添加数据 .. 在我们的 CounterBloc 里面 .. 监听了这个 stream ... 有数据就执行 onData ..

在这个方法里,我们改变了计数器上要显示的数值 ..

然后把这个数值交给了 _counterController 控制的 stream 上,这个 stream 现在有个名字就是这个 count ...

在我们应用的界面上,使用了一个 StreamBuilder ,它会根据 count 这个 stream 上的数据去构建一个小部件 .. stream 上的数据有变化,它就会重新构建这个小部件 ..

创建与使用 BLoC:用 Stream 输出数据《 Flutter 移动应用:BLoC 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点