只要其中一个流获得更新,就会更新 UI(调用 build)。我不使用 snapshot.data,因为我直接从 bloc 读取数据,而 snapshot.data 只包含一个布尔值,而不是流的真实数据。
class _RemoteDebuggingScreenState extends State<RemoteDebuggingScreen> {
@override
Widget build(BuildContext context) {
RemoteDebugBlog bloc = BlocProvider.of(context).remoteDebugBloc;
return Scaffold(
body: StreamBuilder(
stream: Observable.combineLatest2(bloc.state.stream, bloc.kind.stream,
(b1, b2) => b1 != null || b2 != null),
builder: (context, snapshot) {
if (!snapshot.hasData) return Container();
return Column(...
有关combineLatest 的一些漂亮图形的更多信息,请查看:
https://www.burkharts.net/apps/blog/rxdart-magical-transformations-of-streams/
现在知道了上面的内容,我把它移到了一个小部件中:
import 'package:flutter/material.dart';
import 'package:rxdart/rxdart.dart';
class DoubleStreamBuilder extends StatelessWidget {
@override
DoubleStreamBuilder(
{@required this.stream1, @required this.stream2, @required this.builder});
final Stream stream1;
final Stream stream2;
final Widget Function(BuildContext) builder;
Widget build(BuildContext context) => StreamBuilder(
stream: Rx.combineLatest2(
stream1, stream2, (b1, b2) => b1 != null || b2 != null),
builder: (context, snapshot) => builder(context));
}
现在的用法很简单,如下所示:
return DoubleStreamBuilder(
stream1: settingsBloc.uiVin.stream,
stream2: settingsBloc.isPseudoVin.stream,
builder: (context) {
=> this updates when stream 1 or 2 have new values
}