Flutter Bloc无法更新Widget树，测验应用UI不重建问题求助

核心问题 #

你遇到的UI不更新问题，根源在于点击选项后Cubit发出的状态没有携带最新题目数据，且UI构建逻辑未响应数据更新：

• 调用pickedOption()后，仅更新了quizBrain内部状态，但发出的QuizPickedOptionState未包含最新的quizBrain实例；
• BlocConsumer的buildWhen条件限制为current is! QuizActionState，若QuizPickedOptionState属于该类，builder完全不会处理此状态；
• 即使builder处理了QuizPickedOptionState，当前代码仅显示加载指示器，无切换回题目展示的逻辑。

修复步骤 #

1. 调整Cubit状态发送逻辑

修改pickedOption()方法，切换题目后发出携带最新quizBrain的QuizDataState，让UI直接重建展示新题目：

void pickedOption() {
  quizBrain.toNextQuestion();
  if (quizBrain.isLastQuestion()) {
    emit(QuizQuizCompletedState());
  } else {
    // 发送携带最新数据的状态，触发UI重建
    emit(QuizDataState(quizBrain: quizBrain));
  }
}

如果需要保留过渡加载状态（比如点击后显示短暂动画），可改为：

void pickedOption() async {
  quizBrain.toNextQuestion();
  if (quizBrain.isLastQuestion()) {
    emit(QuizQuizCompletedState());
  } else {
    // 先发出过渡状态显示加载动画
    emit(QuizPickedOptionState());
    await Future.delayed(const Duration(milliseconds: 300));
    // 再发送数据状态展示新题目
    emit(QuizDataState(quizBrain: quizBrain));
  }
}

2. 修正BlocConsumer构建逻辑

调整buildWhen条件，确保所有需要触发UI更新的状态都能被处理，同时优化状态判断逻辑：

BlocConsumer<QuizCubit, QuizState>(
  listener: (context, state) {
    if (state is QuizQuizCompletedState) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: const Row(
            children: [
              Icon(Icons.info_outline, color: Colors.white),
              SizedBox(width: 12.0),
              Text("Success", style: TextStyle(color: Colors.white, fontSize: 16.0, fontWeight: FontWeight.bold)),
            ],
          ),
          backgroundColor: Colors.green.shade300,
          duration: const Duration(seconds: 3),
          action: SnackBarAction(
            label: 'Close',
            textColor: Colors.white,
            onPressed: () => ScaffoldMessenger.of(context).hideCurrentSnackBar(),
          ),
        ),
      );
    }
  },
  // 仅监听测验完成的动作状态
  listenWhen: (previous, current) => current is QuizQuizCompletedState,
  bloc: quizCubit,
  // 允许构建加载、数据、过渡状态
  buildWhen: (previous, current) => current is QuizLoadingDemoState || current is QuizDataState || current is QuizPickedOptionState,
  builder: (context, state) {
    if (state is QuizLoadingDemoState || state is QuizPickedOptionState) {
      return const CircularProgressIndicator();
    }
    if (state is QuizDataState) {
      return Column(
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text("${state.quizBrain.questionNumber + 1}: ", style: const TextStyle(fontWeight: FontWeight.bold)),
              Text(state.quizBrain.quizQuestion(), style: const TextStyle(fontWeight: FontWeight.bold)),
            ],
          ),
          SizedBox(
            height: 120,
            width: 210,
            child: ListView.builder(
              itemCount: state.quizBrain.quizOptions().length,
              itemBuilder: (context, index) {
                return GestureDetector(
                  onTap: () => quizCubit.pickedOption(),
                  child: Text(state.quizBrain.quizOptions()[index], style: const TextStyle(fontWeight: FontWeight.bold)),
                );
              },
            ),
          ),
        ],
      );
    }
    return const Text("123");
  },
)

3. 状态类优化（可选）

将动作类状态抽象化，避免listenWhen条件误判：

abstract class QuizActionState extends QuizState {}
class QuizQuizCompletedState extends QuizActionState {}

此时listenWhen: (previous, current) => current is QuizActionState就能准确监听所有动作类状态。

内容的提问来源于stack exchange，提问作者Ali Jawad