Flutter卡片点击颜色切换异常求助：仅首次点击生效

问题场景 #

正在学习App Brewery Angela的Flutter课程，开发BMI计算器应用时，尝试用GestureDetector实现Male和Female卡片的点击变色效果，但遇到问题：卡片仅在首次点击时切换为活跃颜色，再次点击无法恢复为原非活跃颜色。

原代码片段 #

卡片Widget代码

Expanded(
  child: GestureDetector(
    onTap: () {
      setState(() {
        updateColour(0);
      });
    },
    child: ReusableCard(
      colour: maleCardColour,
      cardChild: CardContent(
          contentIcon: FontAwesomeIcons.male,
          contentText: 'MALE'
      ),
    ),
  ),
),

颜色切换逻辑代码

void updateColour(int gender) {
  if (gender == 1) {
    if (maleCardColour == inactiveCardColour) {
      maleCardColour = activeCardColor;
      print("male pressed");
    } else {
      maleCardColour = inactiveCardColour;
      print(maleCardColour);
    }
  }
  if (gender == 0) {
    if (femaleCardColour == inactiveCardColour) {
      femaleCardColour = activeCardColor;
      print("female pressed");
    } else {
      femaleCardColour == inactiveCardColour; // 此处存在错误
    }
  }
}

错误原因 #

在gender == 0的else分支中，使用了相等比较运算符==而非赋值运算符=，导致无法将femaleCardColour重置为inactiveCardColour，所以第二次点击卡片时颜色没有变化。

修复后的代码 #

修正updateColour方法中的赋值错误：

void updateColour(int gender) {
  if (gender == 1) {
    if (maleCardColour == inactiveCardColour) {
      maleCardColour = activeCardColor;
      print("male pressed");
    } else {
      maleCardColour = inactiveCardColour;
      print(maleCardColour);
    }
  }
  if (gender == 0) {
    if (femaleCardColour == inactiveCardColour) {
      femaleCardColour = activeCardColor;
      print("female pressed");
    } else {
      femaleCardColour = inactiveCardColour; // 改为赋值运算符
    }
  }
}

优化建议（可选） #

为了避免类似低级错误、提升代码可读性，可用枚举代替魔法数字0和1管理性别状态：

1. 定义枚举：

enum Gender { male, female }

2. 简化状态管理逻辑：

Gender? selectedGender; // 记录选中的性别

void toggleGender(Gender gender) {
  setState(() {
    selectedGender = selectedGender == gender ? null : gender;
  });
}

3. 卡片颜色直接根据选中状态判断：

// Male卡片的colour属性
colour: selectedGender == Gender.male ? activeCardColor : inactiveCardColour,

// Female卡片的colour属性
colour: selectedGender == Gender.female ? activeCardColor : inactiveCardColour,

这种方式无需维护两个独立颜色变量，逻辑更简洁，也减少了出错概率。

内容的提问来源于stack exchange，提问作者Sami Farah