Flutter中GridView.count内Animated Widget动画不生效问题

你的代码里动画不生效的核心原因是GridView使用了UniqueKey()——每次组件重建时，UniqueKey会让Flutter判定这是一个全新的GridView组件，导致它的所有子组件（包括AnimatedOpacity）都被完全销毁并重新创建，动画状态直接丢失，自然看不到过渡效果。

修复步骤 #

1. 移除或替换GridView的UniqueKey #

直接去掉key: UniqueKey()，或者如果必须使用Key，改用基于稳定状态的ValueKey（比如绑定myCondition或其他不会频繁变化的标识），确保GridView在状态更新时不会被完全重建：

return Column(
  key: const Key('error'),
  children: [
    GridView.count(
      shrinkWrap: true,
      primary: true,
      // 移除UniqueKey，或替换为ValueKey(myCondition)
      physics: const NeverScrollableScrollPhysics(),
      crossAxisCount: 2,
      childAspectRatio: 0.8,
      crossAxisSpacing: context.paddings.newMedium,
      children: [
        AnimatedOpacity(
          key: const Key('green'),
          opacity: myCondition ? 0 : 1,
          duration: const Duration(seconds: 2),
          child: Container(
            height: 30,
            width: 30,
            color: Colors.green,
          ),
        ),
        AnimatedOpacity(
          key: const Key('red'),
          opacity: myCondition ? 0 : 1,
          duration: const Duration(seconds: 2),
          child: Container(
            height: 30,
            width: 30,
            color: Colors.red,
          ),
        ),
      ],
    ),
  ],
);

2. 确保状态更新通过setState触发 #

确认myCondition的修改是在setState回调中执行的，这样才能触发组件重建流程，让AnimatedOpacity感知到opacity的变化并执行动画：

// 示例：更新myCondition的正确方式
void toggleCondition() {
  setState(() {
    myCondition = !myCondition;
  });
}

额外说明 #

• 子组件的Key（比如Key('green')）是有效的，它能帮助Flutter识别每个AnimatedOpacity组件，避免被错误复用，可保留。
• shrinkWrap: true和NeverScrollableScrollPhysics()的设置没问题，不会影响动画执行。

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