Flutter 动画小部件未在 GridView.count 中设置动画

Question

我有一个

GridView.count

，我希望其中的项目根据特定状态进行动画处理。这是一个例子：

return Column(
  key: const Key('error'),
  children: [
    GridView.count(
      shrinkWrap: true,
      primary: true,
      key: UniqueKey(),
      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,
          ),
        ),
      ],
    ),
  ],
);

但是上面的代码没有按预期工作。 没有动画。 我在这里缺少什么？我尝试添加

Key

，但这对我没有帮助。

如果您需要更多信息，请告诉我。

Answer 1

问题在于使用

key: UniqueKey()

。它在构建的每个框架上提供新实例。您可以创建一个状态实例，也可以使用不同的键，例如 ValueKey。

Column(
    key: const Key('error'),
    children: [
      GridView.count(
        shrinkWrap: true,
        primary: true,
        key: ValueKey("GridViewAnimatedOpacity"),