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 的輸出（在您的情況下您調用 state），這樣您就不需要像在StreamBuilder那樣使用snapshot.data 。 這個小部件的例子是flutter bloc庫的BlocBuilder 。

• 使用flutter bloc庫，該庫具有在使用 BLoC 模式時減少樣板代碼的小部件，但是如果您使用此庫，您現在需要使用bloc庫創建您的 BLoC，但是如果您這樣做，現在您可以減少創建的樣板代碼BLoC 中的StreamControllers以及其他有趣的功能，因此您應該看看 bloc 和 flutter bloc 庫的強大功能。