flutter-bloc - 状态相同但状态内容不同时如何使用flutter_bloc改变UI

Question

我正在使用来自 flutter_bloc 包的 BlocBuilder 来响应状态变化。

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<BreathalyzerBloc, BreathalyzerState>(
      builder: (context, state) {

        if (state is BreathalyzerConnected) {
          return Center(child: Text('CONNECTED'));
        }

        if (state is BreathalyzerWarmingUp) {
          return Center(child: Text('PREPARE TO BLOW IN ${state.countDown}'));
        }

      },
    );

问题：多个连续事件产生连续的 BreathalyzerWarmingUp 状态，但连续具有不同的 countDown 值（例如，3、2、1）。但是，由于没有实际转换到不同的状态，因此 BlocBuilder 将忽略后续状态，并且 UI 仅显示第一个倒计时值。

预计屏幕会发生如下变化：

PREPARE TO BLOW IN 3
PREPARE TO BLOW IN 2
PREPARE TO BLOW IN 1

刚刚得到：

PREPARE TO BLOW IN 3

有什么建议么？

Answer 1

将此追踪到 BreathalyzerWarmingUp 上扩展 Equatable 的 props 函数的缺失覆盖。因为缺少道具覆盖，BlocBuilder 将连续的 BreathalyzerWarmingUp 状态视为相等，即使在 countDown 递减时也是如此。

不正确的代码

class BreathalyzerWarmingUp extends BreathalyzerState {
  final String countDown;

  BreathalyzerWarmingUp({@required this.countDown}) : super();

  @override
  String toString() => 'BreathalyzerWarmingUp { countDown: $countDown }';
}

更正的代码：

class BreathalyzerWarmingUp extends BreathalyzerState {
  final String countDown;

  BreathalyzerWarmingUp({@required this.countDown}) : super();

  @override
  List<Object> get props {
    return [countDown];
  }

  @override
  String toString() => 'BreathalyzerWarmingUp { countDown: $countDown }';
}