Flutter中如何在解锁状态达成后更改容器背景颜色

嗨，这个需求很好实现，我们只需要调整容器颜色的条件判断逻辑，把「解锁（unlocked）」状态的优先级放在最前面就可以了——毕竟解锁是比「已接受挑战」更高阶的状态嘛~

核心思路 #

你需要按「解锁 > 已接受 > 未接受」的优先级来判断颜色：

• 当status为unlocked时，直接显示黄色
• 当未接受挑战（isAccepted == 0）时，显示原来的浅白透明
• 剩下的情况就是「已接受但未解锁」，显示深紫色

修改后的完整代码 #

child: Container(
  height: 70,
  width: (Size.width - 70) / 4,
  decoration: BoxDecoration(
    // 这里是修改的核心逻辑：多层条件判断状态优先级
    color: ch[index]['status'] == "unlocked" 
        ? Colors.yellow 
        : ch[index]['isAccepted'] == 0 
            ? textWhite.withOpacity(0.3) 
            : Colors.deepPurple,
    borderRadius: BorderRadius.circular(9),
  ),
  child: Padding(
    padding: const EdgeInsets.all(8.0),
    child: Center(
      child: ch[index]['status'] == "unlocked" 
          ? Image.network(ch[index]['image']) 
          : Image.asset("assets/images/lock.png")
    ),
  ),
),

逻辑验证 #

对应你提到的三个盒子状态：

1. 已解锁的盒子：触发第一个条件，显示黄色
2. 仅接受挑战的盒子：不满足解锁条件，且isAccepted != 0，显示深紫色
3. 未接受/未解锁的盒子：触发第二个条件，显示浅白透明

这样就能完美匹配你的需求啦😉

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