Jetpack Compose底部导航左右滑动动画异常问题求助

需求：底部导航切换时，右向左切换页面（如从Home→ChatList→Profile），内容呈现向右滑动效果；左向右切换页面（如从Profile→ChatList→Home），内容呈现向左滑动效果。目前左向右切换动画正常，但右向左切换不符合预期。

原NavHost代码：

NavHost(
    navController = navController,
    startDestination = BottomNavItem.Home.route,
    enterTransition = {
        slideIntoContainer(
            AnimatedContentTransitionScope.SlideDirection.Left,
            animationSpec = tween(150))
    },
    exitTransition = {
        slideOutOfContainer(
            AnimatedContentTransitionScope.SlideDirection.Left,
            animationSpec = tween(150)
        )
    },
    popEnterTransition = {
        slideIntoContainer(
            AnimatedContentTransitionScope.SlideDirection.Right,
            animationSpec = tween(150))
    },
    popExitTransition = {
        slideOutOfContainer(
            AnimatedContentTransitionScope.SlideDirection.Right,
            animationSpec = tween(150))
    }
) {
    composable(route = BottomNavItem.Home.route){
        HomePageScreen()
    }
    composable(route = BottomNavItem.ChatList.route){
        ChatListPageScreen(navController)
    }
    composable(route = BottomNavItem.Profile.route){
        ProfilePageScreen()
    }
    composable(route = NavItem.Chat.route){
        ChatPageScreen()
    }
}

问题原因 #

原代码中enterTransition和exitTransition固定为向左滑动，而底部导航的页面切换（非返回栈pop操作）都会触发这两个默认过渡。当右向左切换页面时，新页面会从左侧滑入，不符合需求。需要根据页面的顺序动态判断动画方向。

修复方案 #

1. 先定义底部导航页面的顺序列表，用于判断切换方向
2. 在enterTransition和exitTransition中，通过initialState和targetState获取当前/目标页面的路由，对比两者在顺序列表中的索引，动态设置滑动方向

修改后的完整代码：

// 定义底部导航页面的顺序，和你的BottomNavItem顺序一致
val bottomNavRoutes = listOf(
    BottomNavItem.Home.route,
    BottomNavItem.ChatList.route,
    BottomNavItem.Profile.route
)

NavHost(
    navController = navController,
    startDestination = BottomNavItem.Home.route,
    enterTransition = {
        val currentIndex = bottomNavRoutes.indexOf(initialState.destination.route)
        val targetIndex = bottomNavRoutes.indexOf(targetState.destination.route)
        // 右向左切换（currentIndex < targetIndex）：新页面从右侧滑入
        val direction = if (currentIndex < targetIndex) {
            AnimatedContentTransitionScope.SlideDirection.Right
        } else {
            AnimatedContentTransitionScope.SlideDirection.Left
        }
        slideIntoContainer(direction, animationSpec = tween(150))
    },
    exitTransition = {
        val currentIndex = bottomNavRoutes.indexOf(initialState.destination.route)
        val targetIndex = bottomNavRoutes.indexOf(targetState.destination.route)
        // 右向左切换：当前页面向左侧滑出
        val direction = if (currentIndex < targetIndex) {
            AnimatedContentTransitionScope.SlideDirection.Left
        } else {
            AnimatedContentTransitionScope.SlideDirection.Right
        }
        slideOutOfContainer(direction, animationSpec = tween(150))
    },
    // 保留原有的pop动画，处理从Chat页面返回底部导航的情况
    popEnterTransition = {
        slideIntoContainer(
            AnimatedContentTransitionScope.SlideDirection.Right,
            animationSpec = tween(150)
        )
    },
    popExitTransition = {
        slideOutOfContainer(
            AnimatedContentTransitionScope.SlideDirection.Right,
            animationSpec = tween(150)
        )
    }
) {
    composable(route = BottomNavItem.Home.route){
        HomePageScreen()
    }
    composable(route = BottomNavItem.ChatList.route){
        ChatListPageScreen(navController)
    }
    composable(route = BottomNavItem.Profile.route){
        ProfilePageScreen()
    }
    composable(route = NavItem.Chat.route){
        ChatPageScreen()
    }
}

关键说明 #

• bottomNavRoutes必须和你的底部导航条目顺序完全一致，确保索引判断准确
• 右向左切换（如Home→ChatList）：新页面从右侧滑入，当前页面向左侧滑出，符合需求的"内容向右滑动"效果
• 左向右切换（如Profile→ChatList）：新页面从左侧滑入，当前页面向右侧滑出，保持原有的正确动画
• 保留popEnterTransition和popExitTransition，处理从Chat页面返回底部导航的返回栈动画

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