时间戳

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

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

问题描述

目前我正在使用 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();
      },
    ),
  );
}

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

标签： flutterbloc

解决方案

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

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

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

如果您看到BLoC UI 设计指南

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

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

所以你做对了。

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

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

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

推荐阅读