Android：如何覆盖Jetpack Compose中NavHost的默认导航过渡动画？

问题原因 #

你当前的底部导航逻辑使用了popUpTo(navController.graph.findStartDestination().id) + restoreState = true，这种跳转方式会触发栈弹出+状态恢复的流程，而非普通的页面入栈/出栈。如果只设置enterTransition和exitTransition，不会覆盖这种场景下的过渡动画，必须同时配置popEnterTransition和popExitTransition。

另外，你在composable的lambda中直接赋值navigationSelectedItem的方式存在隐患：当页面通过restoreState恢复时，这段代码不会执行，会导致底部导航选中状态与当前页面不一致，也可能间接影响动画触发逻辑。

解决方案 #

1. 为每个页面配置完整的过渡动画

在composable函数中同时指定四个过渡参数，覆盖所有跳转场景：

NavHost(
    navController = navController,
    startDestination = Screens.Home.route,
    modifier = Modifier.padding(paddingValues = it)
) {
    composable(
        Screens.History.route,
        // 从其他页面跳转进入当前页的动画
        enterTransition = { slideInHorizontally(initialOffsetX = { it }) },
        // 从当前页跳转到其他页面的动画
        exitTransition = { slideOutHorizontally(targetOffsetX = { -it }) },
        // 栈恢复时进入当前页的动画
        popEnterTransition = { slideInHorizontally(initialOffsetX = { -it }) },
        // 弹出当前页返回上一页的动画
        popExitTransition = { slideOutHorizontally(targetOffsetX = { it }) }
    ) {
        LaunchedEffect(Unit) {
            navigationSelectedItem = 0
        }
        HistoryScreen(state)
    }

    composable(
        Screens.Home.route,
        enterTransition = { slideInHorizontally(initialOffsetX = { it }) },
        exitTransition = { slideOutHorizontally(targetOffsetX = { -it }) },
        popEnterTransition = { slideInHorizontally(initialOffsetX = { -it }) },
        popExitTransition = { slideOutHorizontally(targetOffsetX = { it }) }
    ) {
        LaunchedEffect(Unit) {
            navigationSelectedItem = 1
        }
        HomeScreen(state)
    }

    composable(
        Screens.Reminders.route,
        enterTransition = { slideInHorizontally(initialOffsetX = { it }) },
        exitTransition = { slideOutHorizontally(targetOffsetX = { -it }) },
        popEnterTransition = { slideInHorizontally(initialOffsetX = { -it }) },
        popExitTransition = { slideOutHorizontally(targetOffsetX = { it }) }
    ) {
        LaunchedEffect(Unit) {
            navigationSelectedItem = 2
        }
        RemindersScreen(state)
    }
}

2. 优化底部导航选中状态的更新逻辑

推荐通过监听navController的当前路由自动更新选中项，避免手动赋值的遗漏问题：

// 在Scaffold作用域内定义
val currentRoute by navController.currentBackStackEntryAsState().map { it?.destination?.route }

// 底部导航项的选中判断改为：
selected = navigationItem.route == currentRoute

// 同时移除每个composable中的navigationSelectedItem手动赋值

这样修改后，不仅能确保底部导航选中状态始终与当前页面一致，也能让动画逻辑更稳定。

3. 自定义无动画（如果需要完全去掉过渡）

如果想直接禁用过渡动画，可将四个过渡参数都设置为无动画：

composable(
    Screens.History.route,
    enterTransition = { EnterTransition.None },
    exitTransition = { ExitTransition.None },
    popEnterTransition = { EnterTransition.None },
    popExitTransition = { ExitTransition.None }
) {
    HistoryScreen(state)
}

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