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上的props函数的缺少覆盖，该函数扩展了Equatable。因为缺少道具覆盖，所以即使countDown递减，BlocBuilder也会将连续的BreathalyzerWarmingUp状态视为相等。

代码不正确

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 }';
}

状态相同但状态内容不同时如何使用flutter_bloc更改UI

1 个答案: