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 设计指南

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

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

所以你做的事情是正确的。

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

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

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