Jetpack Compose点击行/列加载详情页的导航方案咨询

针对你的需求，直接用Compose Navigation的路由参数传递功能就能实现，具体步骤如下：

1. 定义导航路由及参数 #

先封装路由类，明确首页和详情页的路由，给详情页添加itemType参数用来区分不同的内容类型：

sealed class Screen(val route: String) {
    object Home : Screen("home")
    object Detail : Screen("detail/{itemType}") {
        // 生成带参数的路由
        fun createRoute(itemType: String) = "detail/$itemType"
    }
}

2. 配置NavHost与导航控制器 #

在你的主Compose组件中初始化NavController，并配置NavHost关联首页和详情页：

@Composable
fun MainNavigation() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = Screen.Home.route) {
        // 首页
        composable(Screen.Home.route) {
            HomeScreen(navController = navController)
        }
        // 详情页，解析路由参数
        composable(
            route = Screen.Detail.route,
            arguments = listOf(
                navArgument("itemType") { type = NavType.StringType }
            )
        ) { backStackEntry ->
            val itemType = backStackEntry.arguments?.getString("itemType") ?: ""
            DetailScreen(itemType = itemType)
        }
    }
}

3. 实现列表项的点击跳转逻辑 #

在首页的可点击行（比如LazyColumn的item）中，调用navController.navigate()跳转到对应详情页：

@Composable
fun HomeScreen(navController: NavController) {
    val exerciseItems = listOf("倒立", "快速瑜伽", "拉伸")
    
    LazyColumn(modifier = Modifier.fillMaxSize()) {
        items(exerciseItems) { item ->
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .clickable {
                        // 跳转到详情页并传递当前项的类型参数
                        navController.navigate(Screen.Detail.createRoute(item))
                    }
                    .padding(horizontal = 16.dp, vertical = 12.dp),
                verticalAlignment = Alignment.CenterVertically
            ) {
                Text(text = item, fontSize = 18.sp)
                // 这里可以添加你需要的图标等UI元素
            }
        }
    }
}

4. 详情页根据参数加载对应内容 #

在详情页中，根据传递的itemType参数，加载对应的文本和图片资源：

@Composable
fun DetailScreen(itemType: String) {
    // 根据itemType匹配对应内容
    val (title, description, imageRes) = when(itemType) {
        "倒立" -> Triple("倒立入门指南", "核心要点：收紧核心，保持身体直线，避免腰部塌陷...", R.drawable.ic_handstand)
        "快速瑜伽" -> Triple("10分钟快速瑜伽", "适合上班族的碎片化练习，涵盖肩颈、腰背放松动作...", R.drawable.ic_quick_yoga)
        "拉伸" -> Triple("全身拉伸教程", "针对久坐人群的拉伸序列，缓解肌肉紧张...", R.drawable.ic_stretch)
        else -> Triple("未知内容", "暂无相关练习指南", R.drawable.ic_default)
    }

    Column(
        modifier = Modifier.fillMaxSize().padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Top
    ) {
        Image(
            painter = painterResource(id = imageRes),
            contentDescription = title,
            modifier = Modifier.size(220.dp)
        )
        Spacer(modifier = Modifier.height(20.dp))
        Text(text = title, fontSize = 24.sp, fontWeight = FontWeight.Bold)
        Spacer(modifier = Modifier.height(12.dp))
        Text(text = description, fontSize = 16.sp, lineHeight = 24.sp)
    }
}

注意事项 #

• 如果你需要传递更复杂的数据（比如自定义对象），可以将对象序列化为JSON字符串后作为参数传递，或者使用SavedStateHandle来处理；
• 返回首页时，直接调用navController.popBackStack()即可，默认会保留首页的状态；
• 2.5.2版本的Compose Navigation完全支持上述参数传递方式，无需额外升级依赖。

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