Jetpack Compose导航后首页UI未隐藏问题求助

问题现象 #

点击卡片可成功导航到目标Composable，但首页的LazyColumn列表始终显示在屏幕上，目标页面UI叠加在其下方。期望导航后仅显示目标页面，首页保留在返回栈中。

错误原因 #

当前代码存在两个核心问题：

1. 首页UI与导航宿主平级渲染：ContentBody中同时调用了SetupNavGraph和首页的LazyColumn，导致无论导航到哪个页面，首页列表都会被固定渲染在界面上。
2. 导航图起始页配置错误：导航图的startDestination设置为Screen.Column.route，而非首页列表页，导致导航逻辑的起点不符合需求。

修复步骤 #

1. 将首页列表封装为独立Composable并加入导航图 #

创建首页专属Composable，并在导航图中添加对应的路由配置：

// 新增首页列表的Composable
@Composable
fun HomeScreen(navController: NavHostController) {
    val mainRepository = MainRepository()
    val getMainData = mainRepository.getMainData()
    Column(
        modifier = Modifier.padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp),
    ) {
        LazyColumn(
            contentPadding = PaddingValues(all = 12.dp),
            verticalArrangement = Arrangement.spacedBy(12.dp)
        ) {
            items(getMainData.count()) { i ->
                MainCard(
                    mainModel = getMainData[i],
                    index = i + 1,
                    navController = navController,
                )
            }
        }
    }
}

修改Screen密封类，添加首页路由：

const val PAGE_TITLE = "I'm Title"

sealed class Screen(val route: String){
    // 新增首页路由
    object Home: Screen(route = "home_screen")
    // 原有路由保留
    object Column: Screen(route = "column_screen")
    object Row: Screen(route = "row_screen")
    object Box: Screen(route = "box_screen")
    object TextCustomization: Screen(route = "text_customization_screen")
    object AnnotatedString: Screen(route = "annotated_string_screen")
    object TextSelection: Screen(route = "text_selection_screen")
    object Superscript: Screen(route = "superscript_screen")
    object Subscript: Screen(route = "subscript_screen")
    object ExpandedCard: Screen(route = "expanded_card_screen")
    object TextForm: Screen(route = "textForm_screen")
    object SignUpWithGoogle: Screen(route = "sign_up_with_google_screen")
    object CoilImageLoading: Screen(route = "coil_image_loading_screen")
    object PasswordTextForm: Screen(route = "password_text_form_screen")
    object GradientButton: Screen(route = "gradient_button_screen")
    object LazyColumn: Screen(route = "lazy_column_screen")
    object TextFormCharacterCount: Screen(route = "text_form_character_count_screen")
    object CircularIndicatorCard: Screen(route = "circular_indicator_card_screen")
    object PassSingleReqArgWhileNavigation: Screen(route = "pass_single_req_arg_while_navigating/${PAGE_TITLE}"){
        fun passTitle(title: String):String {
            return  "pass_single_req_arg_while_navigating/${title}"
        }
    }
}

更新SetupNavGraph，将起始页改为首页，并添加首页的导航节点：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SetupNavGraph(navController: NavHostController) {
    Surface {
        NavHost(
            navController = navController,
            // 设置首页为导航起始页
            startDestination = Screen.Home.route,
            modifier = Modifier,
            builder = {
                // 添加首页导航节点
                composable(Screen.Home.route) {
                    HomeScreen(navController = navController)
                }
                // 原有导航节点保留
                composable(route = Screen.Column.route) {
                    UsingColumn(navController = navController)
                }
                composable(route = Screen.Row.route) {
                    UsingRow(navController = navController)
                }
                composable(route = Screen.Box.route) {
                    UsingBox(navController = navController)
                }
                composable(route = Screen.TextCustomization.route) {
                    TextCustomization(navController = navController)
                }
                composable(route = Screen.AnnotatedString.route) {
                    CustomAnnotatedString(navController = navController)
                }
                composable(route = Screen.TextSelection.route) {
                    CustomTextSelection(navController = navController)
                }
                composable(route = Screen.Superscript.route) {
                    CustomScriptText(navController = navController)
                }
                composable(route = Screen.Subscript.route) {
                    CustomScriptText(navController = navController)
                }
                composable(route = Screen.ExpandedCard.route) {
                    CustomExpandedCard(navController = navController)
                }
                composable(route = Screen.TextForm.route) {
                    CustomTextFormField(navController = navController)
                }
                composable(route = Screen.SignUpWithGoogle.route) {
                    SignUpWithGoogleCard(navController = navController)
                }
                composable(Screen.CoilImageLoading.route) {
                    CustomImageLoadingCard(navController = navController)
                }
                composable(route = Screen.PasswordTextForm.route) {
                    CustomPasswordTextFormField(navController = navController)
                }
                composable(route = Screen.GradientButton.route) {
                    CustomGradientButtonScreen(navController = navController)
                }
                composable(route = Screen.LazyColumn.route) {
                    CustomLazyColumn(navController = navController)
                }
                composable(route = Screen.TextFormCharacterCount.route) {
                    CustomTextFormFieldCharacterCount(navController = navController)
                }
                composable(route = Screen.CircularIndicatorCard.route) {
                    CustomCircularIndicatorCard(navController = navController)
                }
                composable(
                    route = Screen.PassSingleReqArgWhileNavigation.route,
                    arguments = listOf(navArgument(PAGE_TITLE) {
                        type = NavType.StringType
                    })
                ) {
                    CustomPassSingleReqArgWhileNavigation(
                        navController = navController,
                        title = it.arguments?.getString(PAGE_TITLE).toString()
                    )
                }
            },
        )
    }
}

2. 修改ContentBody，仅渲染导航宿主 #

删除ContentBody中直接渲染LazyColumn的代码，只保留导航图调用：

@Composable
fun ContentBody(
    navController: NavHostController,
    innerPadding: PaddingValues,
) {
    // 仅保留导航图，移除原有的LazyColumn代码
    SetupNavGraph(navController = navController)
}

3. 调整导航逻辑，保留首页在返回栈 #

修改MainCard中的导航代码，移除popUpTo起始页的逻辑（该逻辑会清空返回栈到起始页，不符合保留首页的需求）：

@Composable
fun MainCard(
    mainModel: MainModel,
    index: Int,
    navController: NavHostController,
) {
    Column(modifier = Modifier.fillMaxWidth()){
        Text(
            text = "$index. ${mainModel.title} example",
            fontSize = 20.sp,
            fontWeight = FontWeight.Medium,
            textAlign = TextAlign.Justify,
            modifier = Modifier
                .background(Color.Cyan)
                .padding(horizontal = 16.dp, vertical = 8.dp)
                .clickable {
                    if (mainModel.title == "Pass single req arg while navigation") {
                        navController.navigate(
                            route = Screen.PassSingleReqArgWhileNavigation.passTitle("I'm Title")
                        )
                    } else {
                        navController.navigate(route = mainModel.route) {
                            // 仅保留必要配置，移除popUpTo起始页代码
                            launchSingleTop = true
                        }
                    }
                }
        )
    }
}

修复后效果 #

导航到目标页面时，首页会被隐藏，仅显示目标页面；点击返回键可回到首页，符合需求。

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