Jetpack Compose：LazyVerticalGrid内导航失效问题咨询

你的代码里有两个直接导致点击按钮无法跳转的问题：

1. 组件调用不匹配：EmotionsScreen中遍历数据时调用的是mealTimeCards(emotion)，但你定义的带导航逻辑的组件是EmotionsCards，这导致实际渲染的不是你写了点击事件的卡片组件。
2. 未传递导航控制器：就算调用正确的组件，也没有把navController传递给EmotionsCards，组件无法获取导航实例来执行跳转操作。

修正后的代码： #

@Composable
fun EmotionsScreen(navController: NavHostController) {
    LazyVerticalGrid(
        modifier = Modifier
            .fillMaxSize()
            .padding(15.dp),
        columns = GridCells.Fixed(count = 2)
    ) {
        items(DataSource.emotions) { emotion ->
            // 修正组件名称，并传递navController
            EmotionsCards(navController = navController, emotion = emotion)
        }
    }
}

@Composable
fun EmotionsCards(navController: NavHostController, emotion: CardContent, modifier: Modifier = Modifier) {
    Button(
        onClick = { navController.navigate(NavRoute.ForkPage.route) },
        modifier = modifier.padding(8.dp),
        shape = RoundedCornerShape(10),
    ) {
        // 补充按钮内部内容，比如显示情感名称
        Text(text = emotion.title)
    }
}

额外检查项： #

• 确保NavHost已正确注册NavRoute.ForkPage.route对应的目标页面，示例如下：

NavHost(navController = navController, startDestination = NavRoute.EmotionsScreen.route) {
    composable(NavRoute.EmotionsScreen.route) { EmotionsScreen(navController) }
    composable(NavRoute.ForkPage.route) { ForkPage() } // 确认该页面已定义
}

• 核对NavRoute.ForkPage.route的路由字符串，确保和NavHost中的注册项完全一致，避免拼写错误。

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