dart Flutter动画控件在GridView.count中不动画

eoxn13cs  于 2023-11-14  发布在  Flutter
关注(0)|答案(1)|浏览(139)

我有一个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 s,但这对我没有帮助。
如果你需要更多的信息就告诉我。

bttbmeg0

bttbmeg01#

这个问题是使用key: UniqueKey()。它在每个框架上提供新的示例。你可以创建一个状态示例,或者你可以像ValueKey一样创建不同的键。

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

字符串
完整片段

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool myCondition = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            myCondition = !myCondition;
          });
        },
        child: const Icon(Icons.add),
      ),
      body: Column(
        key: const Key('error'),
        children: [
          GridView.count(
            shrinkWrap: true,
            primary: true,
            key: ValueKey("GridViewAnimatedOpacity"),
            physics: const NeverScrollableScrollPhysics(),
            crossAxisCount: 2,
            childAspectRatio: 0.8,
            crossAxisSpacing: 2,
            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,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

相关问题