Flutter Bloc - BlocListener 对 state 更改没有反应

Question

我的应用程序的想法是用户能够添加休假约会。 添加新的休假约会后，用户会收到通知消息。 为了实现这一点，我有一个休息时间，它对 AddTimeOffEvent 做出反应并设置两个状态 TimeOffAddingState 和 TimeOffAddedState。 我正在使用 flutter_bloc 库。

我的集团：

class TimeOffBloc extends Bloc<TimeOffEvent, TimeOffState> {
  TimeOffRepository repository;
  String activeUser;

  TimeOffBloc({@required this.repository}) : super(TimeOffInitialState());

  @override
  Stream<TimeOffState> mapEventToState(TimeOffEvent event) async* {
    if (event is AddTimeOffEvent) {
      yield TimeOffAddingState();
      try {
        var addResult = await repository.addTimeOff(event.timeOff, activeUser);
        TimeOffsRange timeOffsRange =
            await repository.fetchTimeOffRange(activeUser);
        yield TimeOffAddedState(
            timeOffs: timeOffsRange, excludedWeekends: addResult);
      } catch (e) {
        yield TimeOffErrorState(message: e.toString());
      }
    }
  }
}

我的活动：

abstract class TimeOffEvent extends Equatable {}

class AddTimeOffEvent extends TimeOffEvent {
  final AddTimeOff timeOff;

  AddTimeOffEvent({@required this.timeOff});

  List<Object> get props => [timeOff];
}

我的状态：

abstract class TimeOffState extends Equatable {}

class TimeOffInitialState extends TimeOffState {
  String message = "Loading";

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

class TimeOffAddedState extends TimeOffState {
  TimeOffsRange timeOffs;
  String excludedWeekends;

  TimeOffAddedState({@required this.timeOffs, this.excludedWeekends});

  List<Object> get props => [timeOffs, excludedWeekends];
}

class TimeOffAddingState extends TimeOffState {
  String message = "Adding new time off appointments.";

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

class TimeOffErrorState extends TimeOffState {
  String message;

  TimeOffErrorState({@required this.message});

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

集团建设者

在 bloc builder 小部件中检测到 state 从 TimeOffAddingState 更改为 TimeOffAddedState。

class _TimeOffListContainerState extends State<TimeOffListContainer> {
  TimeOffBloc timeOffBloc;

  @override
  void initState() {
    super.initState();
    timeOffBloc = BlocProvider.of<TimeOffBloc>(context);
  }

  @override
  Widget build(BuildContext context) {
    return RefreshIndicator(
      onRefresh: () => getTimeOffs(),
      child: BlocBuilder<TimeOffBloc, TimeOffState>(
        builder: (context, state) {
          if (state is TimeOffInitialState) {
            return Loading(loadingMessage: state.message);
          } else if (state is TimeOffAddingState) {
            return Loading(loadingMessage: state.message);
          } else if (state is TimeOffAddedState) {
            return TimeOffList(
                timeOffs: state.timeOffs, timeOffBloc: timeOffBloc);
          } else if (state is TimeOffErrorState) {
            return Error(
              errorMessage: state.message,
              onRetryPressed: () => getTimeOffs(),
            );
          }
        },
      ),
    );
  }
}

我有一个 timeOffListPage，我在其中显示约会时间。 页面上有一个 Bloc Listener，它应该在 TimeOffAddesState 上显示一条消息。 但这不起作用。 在调试过程中，我发现在设置 TimeOffAddingState 时调用了 BlocListener。 但是 TimeOffAddedState 被忽略。 令人困惑的是，当我没有在 bloc 上产生 TimeOffAddingState 时，bloc 侦听器适用于 TimeOffAddedState。

    final TimeOffsRange timeOffs;
  final TimeOffBloc timeOffBloc;

  const TimeOffList({Key key, this.timeOffs, this.timeOffBloc})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BlocListener<TimeOffBloc, TimeOffState>(
      listener: (context, state) {
        if (state is TimeOffAddedState) { //is never called...
          if (state.excludedWeekends.isNotEmpty) {
            showSimpleNotification(
              Text(state.excludedWeekends),
              background: Colors.amber,
              duration: Duration(milliseconds: 10000),
            );
          }
        }
      },
      child: Scaffold(...

有任何想法吗？

Answer 1

请查看下面的代码，我在插入新代码行的位置添加了注释。 让我知道它是否对您有帮助。

我的集团：

class TimeOffBloc extends Bloc<TimeOffEvent, TimeOffState> {
  TimeOffRepository repository;
  String activeUser;

  TimeOffBloc({@required this.repository}) : super(TimeOffInitialState());

  @override
  Stream<TimeOffState> mapEventToState(TimeOffEvent event) async* {
    if (event is AddTimeOffEvent) {
      yield TimeOffAddingState();
      try {
        var addResult = await repository.addTimeOff(event.timeOff, activeUser);
        TimeOffsRange timeOffsRange =
            await repository.fetchTimeOffRange(activeUser);
        //add this line of code
        yield TimeOffIdleState();
        await Future.delayed(duration: Duration(milliseconds : 20));
        yield TimeOffAddedState(
            timeOffs: timeOffsRange, excludedWeekends: addResult);
      } catch (e) {
        //add this line of code
        yield TimeOffIdleState();
        await Future.delayed(duration: Duration(milliseconds : 20));
        yield TimeOffErrorState(message: e.toString());
      }
    }
  }
}

我的活动：

abstract class TimeOffEvent extends Equatable {}

class AddTimeOffEvent extends TimeOffEvent {
  final AddTimeOff timeOff;

  AddTimeOffEvent({@required this.timeOff});

  List<Object> get props => [timeOff];
}

我的状态：

abstract class TimeOffState extends Equatable {}

class TimeOffInitialState extends TimeOffState {
  String message = "Loading";

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

class TimeOffAddedState extends TimeOffState {
  TimeOffsRange timeOffs;
  String excludedWeekends;

  TimeOffAddedState({@required this.timeOffs, this.excludedWeekends});

  List<Object> get props => [timeOffs, excludedWeekends];
}

class TimeOffAddingState extends TimeOffState {
  String message = "Adding new time off appointments.";

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

class TimeOffErrorState extends TimeOffState {
  String message;

  TimeOffErrorState({@required this.message});

  @override
  List<Object> get props => [message];
}
//add this class
class TimeOffIdleState extends TimeOffState {
  @override
  List<Object> get props => [];
}

集团建设者

在 bloc builder 小部件中检测到 state 从 TimeOffAddingState 更改为 TimeOffAddedState。

class _TimeOffListContainerState extends State<TimeOffListContainer> {
  TimeOffBloc timeOffBloc;

  @override
  void initState() {
    super.initState();
    timeOffBloc = BlocProvider.of<TimeOffBloc>(context);
  }

  @override
  Widget build(BuildContext context) {
    return RefreshIndicator(
      onRefresh: () => getTimeOffs(),
      child: BlocBuilder<TimeOffBloc, TimeOffState>(
        builder: (context, state) {
          if (state is TimeOffInitialState) {
            return Loading(loadingMessage: state.message);
          } else if (state is TimeOffAddingState) {
            return Loading(loadingMessage: state.message);
          } else if (state is TimeOffAddedState) {
            return TimeOffList(
                timeOffs: state.timeOffs, timeOffBloc: timeOffBloc);
          }
            //add this line of code, you can return any widget at all
            else if (state is TimeOffIdleState){return Container();}
            else if (state is TimeOffErrorState) {
            return Error(
              errorMessage: state.message,
              onRetryPressed: () => getTimeOffs(),
            );
          }
        },
      ),
    );
  }
}