当使用AnimatedSwitcher在Column内部进行切换动画时,出现视觉上跳动的问题。这是因为AnimatedSwitcher默认使用“比例缩放”的形式进行动画切换,而当缩放的比例不同时,就会导致切换时的视觉跳动。
为了解决这个问题,可以通过给AnimatedSwitcher设置约束条件来消除视觉上的跳动。具体做法如下:
1.将AnimatedSwitcher放置在一个Container中。
2.给Container设置约束条件,使其在进行动画切换时,保持宽度和高度不变。
示例代码如下:
Container(
constraints: BoxConstraints.expand(),
child: AnimatedSwitcher(
duration: Duration(milliseconds: 500),
transitionBuilder: (Widget child, Animation animation) {
return ScaleTransition(scale: animation, child: child);
},
child: _widget,
),
),
在以上代码中,Container使用了BoxConstraints.expand()方法,表示该Container的宽度和高度都应该与父容器一致。同时,通过设置AnimatedSwitcher的duration属性和transitionBuilder属性,为其设置了动画持续时间和动画效果,从而使动画切换时,保持宽度和高度不变,消除了视觉上的跳动。