Flutter实现按钮点击后背景色切换并保持的方法

核心思路是通过状态变量记录「答案是否正确」的状态，在按钮样式逻辑中同时判断按压状态和该持久状态，从而控制背景色的显示。

方案1：利用现有score变量判断（推荐） #

从你的代码逻辑来看，score != null代表答案正确，直接用这个条件来控制背景色：

修改按钮样式中的backgroundColor部分：

backgroundColor: MaterialStateProperty.resolveWith<Color>(
  (Set<MaterialState> states) {
    // 已答对时直接显示绿色
    if (score != null) return Color(0xFF55A318);
    // 未答对时，仅按压状态显示绿色
    if (states.contains(MaterialState.pressed)) return Color(0xFF55A318);
    return Color(0XFFE4DBC8);
  },
),

方案2：新增专用状态变量 #

如果需要更明确的状态管理，可在LevelState中添加专用变量：

1. 在LevelState类中添加状态及更新方法：

bool isAnswerCorrect = false;

void setAnswerCorrect(bool value) {
  isAnswerCorrect = value;
  notifyListeners(); // 触发UI重建
}

2. 在按钮点击逻辑中答对时更新状态：

onPressed: () {
  // 注意：原代码中是赋值操作`=`，需改为判断相等`==`
  if (_buttonpressed == true) {
    levelState.setProgress((10).round());
    levelState.evaluate();
    if (score != null) {
      levelState.setAnswerCorrect(true); // 标记答案正确
      // GoRouter.of(context).go('/play/won',extra: {'score': score});
    }
  } else if (score == null) {
    GoRouter.of(context).go('/');
  }
},

3. 修改背景色判断逻辑：

backgroundColor: MaterialStateProperty.resolveWith<Color>(
  (Set<MaterialState> states) {
    if (levelState.isAnswerCorrect) return Color(0xFF55A318);
    if (states.contains(MaterialState.pressed)) return Color(0xFF55A318);
    return Color(0XFFE4DBC8);
  },
),

注意点 #

• 修正原代码中的bug：if (_buttonpressed = true)是赋值操作，需改为if (_buttonpressed == true)，否则逻辑会异常。

内容的提问来源于stack exchange，提问作者Elena Epshtein