Jetpack Compose导航控制器跳转时屏幕重叠、部分渲染问题咨询

问题成因 #

• 最核心的问题是自定义的EnterAnimation组件中，visible状态被硬编码为永久true，且状态完全由组件内部管理，和NavHost的导航生命周期完全解耦。触发页面导航时，旧页面的EnterAnimation不会收到可见性变化通知，永远不会执行退出动画，旧页面内容会一直保留在屏幕上，和新进入的页面内容重叠。
• 用法不符合Compose Navigation的动画规范：Compose Navigation本身提供了页面切换动画的统一管理入口，直接在每个目的地的内容外层嵌套独立的AnimatedVisibility，会绕过NavHost对页面可见性的控制，导致旧页面无法被正确移除。
• 当前使用的原生NavHost默认没有内置的动画切换支持，自定义的动画逻辑没有和导航的进出事件绑定，自然无法正确触发退出逻辑。

修复方案 #

方案1：使用官方推荐的动画导航库（最优解） #

建议使用Accompanist的动画导航组件，或是Compose 1.7及以上版本内置的动画导航API，直接在目的地配置层面定义进出动画，无需自己封装AnimatedVisibility：

// 替换原生NavHost为AnimatedNavHost
@OptIn(ExperimentalAnimationApi::class)
@Composable
fun NavHostAuth(
    navController: NavHostController,
) {
    AnimatedNavHost(
        navController = navController,
        startDestination = NavRoutesAuth.SignIn.route
    ) {
        composable(
            route = NavRoutesAuth.SignIn.route,
            enterTransition = {
                slideInVertically(initialOffsetY = { -40 }) + expandVertically(expandFrom = Alignment.Top) + fadeIn(initialAlpha = 0.3f)
            },
            exitTransition = {
                slideOutVertically() + shrinkVertically() + fadeOut()
            }
        ) {
            ScreenSignInWithInputValidationDebounce(navController)
        }

        composable(
            route = NavRoutesAuth.SignUp.route,
            enterTransition = {
                slideInVertically(initialOffsetY = { -40 }) + expandVertically(expandFrom = Alignment.Top) + fadeIn(initialAlpha = 0.3f)
            },
            exitTransition = {
                slideOutVertically() + shrinkVertically() + fadeOut()
            }
        ) {
            ScreenSignUpWithInputValidationDebounce(navController)
        }
    }
}

所有动画逻辑由导航组件统一管理，页面切换时会自动触发对应页面的进出动画，不会出现重叠问题。

方案2：修改现有自定义动画组件（不推荐） #

如果要保留现有的EnterAnimation封装，需要把可见性控制权限交给外层，不要在组件内部硬编码状态：

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun EnterAnimation(
    visible: Boolean, // 从外部传入可见性状态
    content: @Composable () -> Unit
) {
    AnimatedVisibility(
        visible = visible,
        modifier = Modifier,
        enter = slideInVertically(initialOffsetY = { -40 })
                + expandVertically(expandFrom = Alignment.Top)
                + fadeIn(initialAlpha = 0.3f),
        exit = slideOutVertically()
                + shrinkVertically()
                + fadeOut()
    ) {
        content()
    }
}

这种方案需要手动监听导航栈变化来更新每个页面的可见性，维护成本远高于直接用官方动画导航API。

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