Flutter中如何根据状态设置Elevated Button的backgroundColor？

我用Flutter开发答题游戏，作为新手，给一道题做了4个ElevatedButton。点击按钮会执行checkAnswer方法，之后想修改按钮背景色。移除按钮onPressed里的result == null判断时，背景色能正常变化，但用户能重复点击；加了这个判断防止重复点击后，背景色就不更新了，不知道问题出在哪。

原代码片段 #

...(currentQuestion["options"] as List<String>)
                          .map((option) =>
                          Padding(
                              padding: const EdgeInsets.only(bottom: 10.0),
                              // Alttan boşluk
                              child: ElevatedButton(
                                onPressed: result == null
                                    ? () {
                                        setState(() {
                                          selectedOption = option;
                                        });
                                        checkAnswer(option);
                                      }
                                    : null,
                                style: ElevatedButton.styleFrom(
                                    backgroundColor: result ==
                                                AppLocalizations.of(context)
                                                    ?.truth_answer &&
                                            selectedOption == option
                                        ? Colors.red
                                        : result ==
                                                    AppLocalizations.of(context)
                                                        ?.wrong_answer &&
                                                selectedOption == option
                                            ? Colors.blue
                                            : result ==
                                                        AppLocalizations.of(context)
                                                            ?.wrong_answer &&
                                                    currentQuestion["answer"]
                                                            as String ==
                                                        option
                                                ? Colors.red
                                                : Colors.blue),
                                child: Text(
                                  option,
                                  style: const TextStyle(color: Colors.black87),
                                ),
                              ))),

void checkAnswer(String answer) {
  if (timer != null) {
    timer!.cancel();
  }

  setState(() {
    if (answer == questions[currentQuestionIndex]["answer"] as String) {
      result = AppLocalizations.of(context)?.truth_answer;
    } else {
      result = AppLocalizations.of(context)?.wrong_answer;
    }

    print("Seçilen seçenek: $selectedOption");
    print("Doğru cevap: ${questions[currentQuestionIndex]["answer"]}");
    print("Sonuç: $result");
  });
}

问题原因 #

当你给onPressed设为null时，按钮会进入禁用状态。Flutter的ElevatedButton在禁用状态下，会自动应用系统默认的禁用样式，直接覆盖你通过styleFrom设置的backgroundColor，所以你看不到自定义的颜色变化。

解决方案 #

1. 自定义禁用状态的样式

用ButtonStyle替代styleFrom，通过MaterialStateProperty.resolveWith来处理不同状态（包括禁用）的样式，确保禁用时也显示你想要的背景色。

2. 合并状态更新逻辑

把selectedOption的更新放到checkAnswer的setState里，减少不必要的状态刷新，避免状态不同步。

修改后的代码 #

按钮部分样式修改

style: ButtonStyle(
  backgroundColor: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) {
    // 处理禁用状态，强制使用自定义颜色
    if (states.contains(MaterialState.disabled)) {
      if (result == AppLocalizations.of(context)?.truth_answer && selectedOption == option) {
        return Colors.red;
      } else if (result == AppLocalizations.of(context)?.wrong_answer && selectedOption == option) {
        return Colors.blue;
      } else if (result == AppLocalizations.of(context)?.wrong_answer && (currentQuestion["answer"] as String) == option) {
        return Colors.red;
      }
      return Colors.blue;
    }
    // 正常状态下的默认颜色
    return Colors.blue;
  }),
),

按钮onPressed回调修改

onPressed: result == null
    ? () {
        checkAnswer(option);
      }
    : null,

checkAnswer方法修改

void checkAnswer(String answer) {
  if (timer != null) {
    timer!.cancel();
  }

  setState(() {
    // 把选中选项的更新合并到这里
    selectedOption = answer;
    if (answer == questions[currentQuestionIndex]["answer"] as String) {
      result = AppLocalizations.of(context)?.truth_answer;
    } else {
      result = AppLocalizations.of(context)?.wrong_answer;
    }

    print("Seçilen seçenek: $selectedOption");
    print("Doğru cevap: ${questions[currentQuestionIndex]["answer"]}");
    print("Sonuç: $result");
  });
}

补充说明 #

• MaterialStateProperty.resolveWith可以针对按钮的不同状态（禁用、按下、悬停等）设置不同样式，这里重点处理了禁用状态，确保颜色不会被覆盖。
• 合并状态更新后，只需要一次setState就能完成选中选项和结果的更新，减少了组件刷新次数，逻辑也更清晰。

内容的提问来源于stack exchange，提问作者Ahmet Yılmaz