BLoC 和多个流 - 有更好的解决方案吗？

Question

目前我正在使用 Flutter 中的 BLoC，并且我有一个关于 Bloc 中的多个流的问题。

例如，当一个屏幕有多个应该依赖于 Bloc 的小部件时。我可以将整个屏幕包裹在 StreamBuilder 中，但每次都会重新构建所有小部件。

示例块：

class TestBloc {
  final StreamController _dataController = StreamController<String>();
  final StreamController _appBarTitleController = StreamController<String>();

  TestBloc();

  Stream<String> get appBarTitle => _appBarTitleController.stream;

  Stream<DataState> get data => _dataController.stream;

  void fetchData(String path) async {
    _dataController.sink.add(PokemonDataLoading());

    Data data = await _getData();

    _dataController.sink.add(Loaded(data));
    _appBarTitleController.sink.add(data.name);
  }

  Future<Data> _getData(String path) async {
    return await _dataRepository.fetchData(path);
  }

  void dispose() {
    _dataController.close();
    _appBarTitleController.close();
  }
}

在示例构建方法中，您可以看到两个不同的 StreamBuilder，一个用于应用栏标题，一个用于内容。当然，我可以在这个示例中将它们包装到一个 StreamBuilder 中，但有时这并不容易。它们可能依赖于其他数据或用户交互。

@override
Widget build(BuildContext context) {
  _testBloc.fetchData();

  return ScaffoldWithSafeArea(
    title: StreamBuilder(
      stream: _testBloc.appBarTitle,
      builder: (context, AsyncSnapshot<String> snapshot) {
        if (snapshot.hasData) {
          return Text(snapshot.data);
        }
        return Text("Test");
      },
    ),
    child: StreamBuilder<DataState>(
      stream: _testBloc.data,
      builder: (context, AsyncSnapshot<DataState> snapshot) {
        DataState state = snapshot.data;

        if (state is DataInitial) {
          return _buildLoading();
        } else if (state is DataLoaded) {
          return _buildContent(state.data);
        }
        return _buildLoading();
      },
    ),
  );
}

对于一个屏幕上的多个流，是否有更好的解决方案？我在这里使用了很多样板代码，并希望避免这种情况。

Answer 1

为了在一个屏幕中管理多个流，最好的解决方案是让多个小部件监听相应的流。

这样，您可以通过优化小部件的构建总数来提高应用的性能。

通过这样做，您可以创建侦听 BLoC 输出（流）的小部件，并在应用的不同部分重用它们，但为了使小部件可重用，您需要将 BLoC 注入小部件。

如果你看到BLoC UI design guidelines

每个“足够复杂”的组件都有一个对应的 BLoC

这样，您的屏幕现在将由不同的组件组成，并且此组件是一个小部件，用于侦听 BLoC 的输出（流）。

所以你做对了。

如果您想稍微减少小部件中的重复代码，您可以：

• 创建您自己的小部件，它侦听流并直接返回 BLoC 的输出（在您的情况下，您调用状态），这样您就不需要像在 StreamBuilder 中那样使用 snapshot.data。此小部件的示例是flutter bloc 库的BlocBuilder。

• 使用 flutter bloc 库，该库具有在使用 BLoC 模式时减少样板代码的小部件，但如果您使用此库，您现在需要使用 bloc 库创建 BLoC，但如果您这样做，现在您减少在 BLoC 中创建 StreamControllers 的样板代码以及其他有趣的功能，因此您应该看看 bloc 和 Flutter bloc 库的强大功能。