Flutter中SharedAxisTransition标签页切换无动画问题求助

问题根源 #

PageTransitionSwitcher依赖子组件的Key变化来触发过渡动画。你的代码中，两个页面分支的AnimationLimiter未设置唯一Key，导致切换selectedIndex时，框架无法识别这是两个不同组件，因此不会执行动画。

修复方案 #

给两个页面分支的Widget分别添加唯一Key，比如用ValueKey对应selectedIndex的0和1，示例如下：

body: PageTransitionSwitcher(
  duration: const Duration(milliseconds: 500),
  transitionBuilder: (Widget child, Animation<double> primaryAnimation,
      Animation<double> secondaryAnimation) {
    return SharedAxisTransition(
        animation: primaryAnimation,
        secondaryAnimation: secondaryAnimation,
        transitionType: SharedAxisTransitionType.horizontal,
        child: child);
  },
  child: selectedIndex == 0
      ? AnimationLimiter(
          key: const ValueKey(0), // 添加唯一Key
          child: AnimatedList(
            key: _key,
            initialItemCount: db.dailyList.length,
            itemBuilder: (context, index, animation) {
              return AnimationConfiguration.staggeredList(
                position: index,
                duration: const Duration(milliseconds: 375),
                child: SlideAnimation(
                  verticalOffset: 50.0,
                  child: FadeInAnimation(
                    child: SizeTransition(
                      sizeFactor: animation,
                      child: Tile(
                        title: db.dailyList[index][0],
                        goalAchieved: db.dailyList[index][1],
                        onChanged: (value) =>
                            {checkBoxChanged(value, index)},
                        deleteFunction: (context) => deleteGoal(index),
                      ),
                    ),
                  ),
                ),
              );
            },
          ),
        )
      : AnimationLimiter(
          key: const ValueKey(1), // 添加唯一Key
          child: ListView.builder(
            itemCount: dbAchieved.dailyAchievedList.length,
            itemBuilder: (context, index) {
              return AchievedTile(
                title: dbAchieved.dailyAchievedList[index][0],
                deleteFunction: (context) => deleteAchievedGoal(index),
              );
            },
          ),
        ),
),

额外排查点 #

• 确认animations依赖已正确添加到pubspec.yaml，并执行过flutter pub get
• 检查setState是否正常触发（你的代码中onTap里的setState逻辑没问题）
• 确保没有其他嵌套Widget干扰过渡动画执行（添加Key后通常可解决核心问题）

内容的提问来源于stack exchange，提问作者deandrehaijiel