Jetpack Compose嵌套导航复用Profile页面致底部导航选中状态异常

你遇到的核心问题是：底部导航的选中判断逻辑会把嵌套在搜索页下的他人Profile页面误判为属于底部导航的Profile入口路由，导致切换到错误的底部导航项。而重复创建Profile页面会引发代码冗余，显然不是最优解。

我们可以通过拆分路由层级+复用页面参数的方式解决，既不需要重复代码，又能修正底部导航的选中状态。

1. 明确路由层级 #

将底部导航的入口定义为根路由，把个人/他人Profile分别作为对应根路由的嵌套页面：

object Routes {
    // 底部导航根路由
    const val HOME = "home"
    const val SEARCH_ROOT = "search_root"
    const val PROFILE_ROOT = "profile_root"
    
    // 嵌套页面路由
    const val SEARCH_PAGE = "search_page"
    const val MY_PROFILE = "my_profile"
    const val OTHER_PROFILE = "other_profile/{userId}"
}

2. 配置嵌套导航图 #

用导航图（NavGraph）组织层级，让他人Profile属于搜索导航的嵌套页面，个人Profile属于Profile导航的嵌套页面：

NavHost(navController = navController, startDestination = Routes.HOME) {
    // 首页
    composable(Routes.HOME) { HomeScreen() }

    // 搜索嵌套导航
    navigation(startDestination = Routes.SEARCH_PAGE, route = Routes.SEARCH_ROOT) {
        composable(Routes.SEARCH_PAGE) {
            SearchScreen(navController = navController)
        }
        composable(Routes.OTHER_PROFILE) { backStackEntry ->
            val userId = backStackEntry.arguments?.getString("userId")
            ProfileScreen(userId = userId)
        }
    }

    // Profile嵌套导航
    navigation(startDestination = Routes.MY_PROFILE, route = Routes.PROFILE_ROOT) {
        composable(Routes.MY_PROFILE) {
            ProfileScreen(userId = null)
        }
    }
}

3. 修正底部导航选中逻辑 #

修改选中判断逻辑，只检查当前页面的根路由是否匹配底部导航项，忽略嵌套页面的路由：

NavigationBar(
    modifier = Modifier,
    containerColor = MaterialTheme.colorScheme.background
) {
    items.forEachIndexed { _, item ->
        // 获取当前页面的根路由（即底部导航对应的顶级路由）
        val currentRootRoute = navBackStackEntry?.destination?.hierarchy?.firstOrNull { dest ->
            items.any { navItem -> navItem.route == dest.route }
        }?.route

        val selected = currentRootRoute == item.route

        NavigationBarItem(
            selected = selected,
            onClick = {
                if (!selected) {
                    navController.navigate(item.route ?: "") {
                        // 保持底部导航的单栈特性，避免重复入栈
                        popUpTo(navController.graph.startDestinationId) {
                            saveState = true
                        }
                        launchSingleTop = true
                        restoreState = true
                    }
                }
            },
            icon = {
                Icon(
                    imageVector = if (selected) item.selectedIcon else item.unselectedIcon,
                    contentDescription = null
                )
            }
        )
    }
}

4. 复用Profile页面 #

通过传入userId参数区分个人/他人Profile，完全复用同一页面：

@Composable
fun ProfileScreen(userId: String?) {
    val isMyProfile = userId == null

    // 根据isMyProfile加载对应数据
    LaunchedEffect(userId) {
        if (isMyProfile) {
            // 加载个人信息
        } else {
            // 加载指定userId的他人信息
        }
    }

    // 页面UI逻辑（复用同一套布局，仅根据参数展示不同内容）
    Column(modifier = Modifier.fillMaxSize()) {
        if (isMyProfile) {
            Text(text = "我的Profile")
        } else {
            Text(text = "用户${userId}的Profile")
        }
        // 其他通用UI组件
    }
}

为什么这个方案可行？ #

• 他人Profile属于搜索导航的嵌套页面，从搜索页进入后，根路由仍然是SEARCH_ROOT，底部导航会保持选中搜索项
• 通过参数userId复用Profile页面，避免代码冗余
• 导航图的层级结构更清晰，后续扩展维护更方便

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