在不断变化的列布局中使用 AnimatedSwticher

Question

当在

AnimatedSwitcher

中使用

Column

时，效果很好：

Column(
  children: [
    AnimatedSwitcher(...),
    // Some other stuff
  ]
)

但是，如果我在重建期间更改列的布局，它就不再执行动画了，因为它的子树的结构发生了变化，所以它认为它是一个新的小部件

Column(
  children: [
    // Some other stuff
    AnimatedSwitcher(...),
  ]
)

有什么解决方法或解决办法吗？

Answer 1

在 AnimatedSwitcher

child property

你是否传递这样的 ValueKey？

AnimatedSwitcher(
            duration: const Duration(milliseconds: 500),
            transitionBuilder: (Widget child, Animation<double> animation) {
              return ScaleTransition(scale: animation, child: child);
            },
            child: Text(
              '$_count',
              // This key causes the AnimatedSwitcher to interpret this as a "new"                  
              // when the count changes.
              key: ValueKey<int>(_count),
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ),

如果这还不够，你能分享完整的代码吗？