如何实现Flutter中基于滚动位置切换Widget的含高度过渡动画

核心思路 #

直接通过setState切换Widget不会生成过渡动画，我们可以用AnimatedSwitcher结合SizeTransition实现平滑的切换效果，同时处理不同Widget的高度变化过渡。另外需要优化滚动监听逻辑，避免不必要的状态更新。

步骤1：优化滚动监听逻辑 #

修改initState中的滚动监听，增加容错阈值并仅在状态实际变化时更新：

@override
void initState() {
  super.initState();
  WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
    scrollController.addListener(() {
      // 用小阈值替代严格等于0，避免滚动精度问题导致状态频繁切换
      final isAtTop = scrollController.position.pixels <= 10;
      // 仅当状态实际变化时调用setState，减少不必要的重绘
      if (isAtTop != carouselSliderVisible) {
        setState(() {
          carouselSliderVisible = isAtTop;
        });
      }
    });
  });
}

步骤2：用AnimatedSwitcher实现带高度过渡的切换动画 #

将原来的条件切换Widget包裹在AnimatedSwitcher中，通过transitionBuilder指定高度过渡动画：

Column(
  children: [
    AnimatedSwitcher(
      // 动画时长，可根据需求调整
      duration: const Duration(milliseconds: 300),
      // 自定义过渡逻辑，实现高度变化的平滑动画
      transitionBuilder: (child, animation) {
        return SizeTransition(
          sizeFactor: animation,
          axis: Axis.vertical,
          child: child,
        );
      },
      child: carouselSliderVisible 
          ? CarouselSlider(
              // 必须给每个切换的Widget设置唯一key，AnimatedSwitcher才能识别切换动作
              key: const ValueKey('carousel'),
              items: const [
                Text('blablabla'),
                Text('blabla')
              ],
              options: CarouselOptions(
                height: size.height * 0.2,
                enableInfiniteScroll: false
              ),
            )
          : const Text(
              'Polecane',
              key: const ValueKey('text'),
            ),
    ),
  ],
)

关键说明 #

• 唯一Key的必要性：AnimatedSwitcher依赖子Widget的key判断是否需要触发动画，所以切换的两个Widget必须设置不同的ValueKey。
• 高度过渡实现：SizeTransition会根据子Widget的实际高度自动计算过渡动画，完美适配两个Widget高度不同的场景。
• 性能优化：滚动监听中仅在状态实际变化时调用setState，避免频繁重绘影响页面性能。

内容的提问来源于stack exchange，提问作者Karol Wiśniewski