flutter_bloc many Event to many BlocBuilder答案

【问题标题】：flutter_bloc many Event to many BlocBuilderflutter_bloc many Event to many BlocBuilder
【发布时间】：2020-12-17 03:36:24
【问题描述】：

最近在学习flutter_bloc，参考项目flutter_weather。

我比较疑惑的是，如果一个Bloc类有很多Events，而大部分Events都会有State返回的值，而项目中有很多BlocBuilders，应该怎么办？如果我想让BlocBuilder 只回复某个Event，我会这样做吗？

我能想到的方法是将这个Bloc分成多个Blocs，或者把每个要返回的值当作Bloc的一个属性，BlocBuilder使用buildwhen的方法来判断是否重建。

但是这两种方法对我都不好。有什么好的方法吗？最好有github上的项目供参考。

例如：这是活动：

abstract class WeatherEvent extends Equatable {
  const WeatherEvent();
}

class WeatherRequested extends WeatherEvent {
  final String city;

  const WeatherRequested({@required this.city}) : assert(city != null);

  @override
  List<Object> get props => [city];
}

class WeatherRefreshRequested extends WeatherEvent {
  final String city;

  const WeatherRefreshRequested({@required this.city}) : assert(city != null);

  @override
  List<Object> get props => [city];
}

这是状态：

abstract class WeatherState extends Equatable {
  const WeatherState();

  @override
  List<Object> get props => [];
}

class WeatherInitial extends WeatherState {}

class WeatherLoadInProgress extends WeatherState {}

class WeatherLoadSuccess extends WeatherState {
  final Weather weather;

  const WeatherLoadSuccess({@required this.weather}) : assert(weather != null);

  @override
  List<Object> get props => [weather];
}

class WeatherLoadFailure extends WeatherState {}

这是集团：

class WeatherBloc extends Bloc<WeatherEvent, WeatherState> {
  final WeatherRepository weatherRepository;

  WeatherBloc({@required this.weatherRepository})
      : assert(weatherRepository != null),
        super(WeatherInitial());

  @override
  Stream<WeatherState> mapEventToState(WeatherEvent event) async* {
    if (event is WeatherRequested) {
      yield* _mapWeatherRequestedToState(event);
    } else if (event is WeatherRefreshRequested) {
      yield* _mapWeatherRefreshRequestedToState(event);
    }
  }

  Stream<WeatherState> _mapWeatherRequestedToState(
    WeatherRequested event,
  ) async* {
    yield WeatherLoadInProgress();
    try {
      final Weather weather = await weatherRepository.getWeather(event.city);
      yield WeatherLoadSuccess(weather: weather);
    } catch (_) {
      yield WeatherLoadFailure();
    }
  }

  Stream<WeatherState> _mapWeatherRefreshRequestedToState(
    WeatherRefreshRequested event,
  ) async* {
    try {
      final Weather weather = await weatherRepository.getWeather(event.city);
      yield WeatherLoadSuccess(weather: weather);
    } catch (_) {}
  }
}

这是 BlocConsumer：

// BlocBuilder1
BlocBuilder<WeatherBloc, WeatherState>(
  builder: (context, state) {
    if (state is WeatherLoadInProgress) {
      return Center(child: CircularProgressIndicator());
    }
    if (state is WeatherLoadSuccess) {
      final weather = state.weather;
      return Center(child: Text("WeatherRequested "))
    }
)
// BlocBuilder2
BlocBuilder<WeatherBloc, WeatherState>(
  builder: (context, state) {
    if (state is WeatherLoadInProgress) {
      return Center(child: CircularProgressIndicator());
    }
    if (state is WeatherLoadSuccess) {
      final weather = state.weather;
      return Center(child: Text("WeatherRefreshRequested"))
    }
)

问题是我希望 BlocBuilder1 仅在 Event 类型为 WeatherRequested 时工作，而 BlocBuilder2 仅在 Event 类型为 WeatherRefreshRequested 时工作。我的一个想法是，每个Event都有自己的State，然后在buildwhen中判断State的类型。

有什么好的方法吗？

【问题讨论】：

您能否提供一个代码示例来说明问题所在？从文本中破译有点困难。如果您只想对特定的状态变化做出反应，请使用BlocBuilder 的buildWhen 参数，这是一个接受先前和当前状态并返回一个布尔值的函数，用于决定builder 是否应该运行。

标签： flutter bloc flutter-bloc

【解决方案1】：

如果您想构建您的小部件以响应您应该使用的某些状态 BlocConsumer 并在 buildWhen 中告诉该 bloc 告诉它应该在什么状态下构建/重建您的小部件。

BlocConsumer<QuizBloc, QuizState>(
  buildWhen: (previous, current) {
    if (current is QuizPoints)
      return true;
    else
      return false;
  },
  listener: (context, state) {},
  builder: (context, state) {
    if (state is QuizPoints)
      return Container(
        child: Center(
          child: Countup(
            begin: 0,
            end: state.points,
            duration: Duration(seconds: 2),
            separator: ',',
          ),
        ),
      );
    else
      return Container();
  },
);

【讨论】：