Flutter中如何实现Card组件多次点击切换颜色

核心缺陷 是onTap逻辑缺少状态判断：无论当前Card处于什么颜色状态，点击后都会直接给color变量硬编码赋值为淡蓝色，因此无法触发恢复默认色的分支，自然实现不了来回切换的效果。

修正思路 #

点击事件触发时，先判断当前组件的选中/颜色状态，再根据状态给颜色变量赋对应的值，形成双向的状态切换逻辑。优先使用布尔值标记选中态，而非直接比对颜色值，避免后续修改颜色配置时需要同步调整判断逻辑，也不存在颜色值匹配失效的问题。

可直接复用的代码实现 #

快速修改版（不新增状态变量，完全适配你当前的代码结构） #

不需要额外调整现有变量定义，只需要在点击回调中补充颜色判断分支即可，改完即可实现切换效果：

Color color;
@override
void initState() {
 super.initState();
 color = Colors.transparent;
}

InkWell(
 onTap: () {
  setState(() {
   // 根据当前颜色值做反向赋值
   color = color == Colors.transparent 
     ? Colors.lightBlueAccent 
     : Colors.transparent;
  });
 },
 child:Card(
   color: color
 )
)

可维护性优化版（推荐生产环境使用） #

这种写法不需要额外维护单独的颜色变量，直接通过布尔状态计算对应的组件样式，后续调整颜色、添加交互效果（比如圆角、阴影切换）都不需要改动核心点击逻辑：

// 抽离颜色常量，后续调整样式无需修改业务逻辑
final Color _defaultCardColor = Colors.transparent;
final Color _activeCardColor = Colors.lightBlueAccent;
// 用布尔值标记选中状态，比颜色比对效率更高、逻辑更清晰
bool _isCardSelected = false;

@override
void initState() {
 super.initState();
}

InkWell(
 onTap: () {
  // 触发setState重建组件，翻转选中状态
  setState(() => _isCardSelected = !_isCardSelected);
 },
 child:Card(
   color: _isCardSelected ? _activeCardColor : _defaultCardColor
 )
)

注意事项 #

如果你的Card初始默认颜色不是透明色，是Material主题自带的浅白色Card样式，只需要把代码中所有代表默认色的取值替换成对应颜色值即可，切换逻辑无需改动。

内容的提问来源于stack exchange，提问作者bargougui sabri