Kotlin Jetpack Compose实现列表项点击跳转至详情页方案咨询

下面是针对你的场景（从Room数据库加载菜单数据）的完整实现步骤，完全适配Compose单Activity架构：

1. 添加导航依赖 #

先确保在build.gradle(Module)中引入Navigation Compose的依赖（替换为最新版本）：

dependencies {
    implementation "androidx.navigation:navigation-compose:2.7.7"
}

2. 定义导航路由 #

用密封类统一管理屏幕路由，同时处理参数传递（推荐传递菜单ID，避免复杂对象序列化的问题）：

sealed class Screen(val route: String) {
    object Home : Screen("home_screen")
    // 用占位符声明参数，方便后续解析
    object Detail : Screen("detail_screen/{menuId}") {
        // 构建带参数的完整路由
        fun createRoute(menuId: Int) = "detail_screen/$menuId"
    }
}

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

在主Activity的setContent中创建NavController，并通过NavHost关联所有页面：

class MainActivity : ComponentActivity() {
    // 初始化Room的Dao实例（假设你已完成Room配置）
    private val menuDao by lazy { AppDatabase.getInstance(this).menuDao() }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val navController = rememberNavController()
            NavHost(navController = navController, startDestination = Screen.Home.route) {
                // 首页目的地
                composable(Screen.Home.route) {
                    HomeScreen(
                        menuDao = menuDao,
                        onMenuClick = { menuId ->
                            // 点击菜单时触发跳转
                            navController.navigate(Screen.Detail.createRoute(menuId))
                        }
                    )
                }
                // 详情页目的地，声明参数类型
                composable(
                    route = Screen.Detail.route,
                    arguments = listOf(navArgument("menuId") { type = NavType.IntType })
                ) { backStackEntry ->
                    // 解析传递的菜单ID
                    val menuId = backStackEntry.arguments?.getInt("menuId") ?: 0
                    DetailScreen(menuDao = menuDao, menuId = menuId)
                }
            }
        }
    }
}

4. 首页实现列表点击逻辑 #

在首页的菜单列表中，给每个列表项添加点击事件，触发导航：

@Composable
fun HomeScreen(menuDao: MenuDao, onMenuClick: (Int) -> Unit) {
    // 用Flow监听Room数据变化，自动更新列表
    val menus by menuDao.getAllMenus().collectAsState(initial = emptyList())

    LazyColumn {
        items(menus) { menu ->
            MenuItem(menu = menu) {
                // 点击时传递菜单ID
                onMenuClick(menu.id)
            }
        }
    }
}

@Composable
fun MenuItem(menu: Menu, onClick: () -> Unit) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp)
            .clickable { onClick() },
        elevation = CardDefaults.cardElevation(4.dp)
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text(text = menu.name, fontSize = 18.sp, fontWeight = FontWeight.Bold)
            Text(text = menu.description, fontSize = 14.sp, color = Color.Gray)
        }
    }
}

5. 详情页加载并展示数据 #

通过传递的菜单ID，从Room查询对应详情并展示：

@Composable
fun DetailScreen(menuDao: MenuDao, menuId: Int) {
    // 根据ID查询菜单详情
    val menu by menuDao.getMenuById(menuId).collectAsState(initial = null)

    menu?.let {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(16.dp),
            verticalArrangement = Arrangement.Top,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(text = it.name, fontSize = 24.sp, fontWeight = FontWeight.Bold)
            Spacer(modifier = Modifier.height(16.dp))
            Text(text = it.description, fontSize = 16.sp)
            Spacer(modifier = Modifier.height(16.dp))
            Text(text = "价格: $${it.price}", fontSize = 18.sp, color = Color.Green)
            // 可添加更多详情字段
        }
    } ?: run {
        // 无数据时显示空状态
        Text(text = "菜单不存在", fontSize = 18.sp, modifier = Modifier.align(Alignment.Center))
    }
}

关键说明 #

• 为什么不用Intent？在Compose单Activity架构中，Navigation Compose是官方推荐的页面跳转方案，它能更好地管理回退栈、状态保存，比Intent更简洁可靠。只有跳转到其他应用时才需要用到Intent。
• 若要传递完整菜单对象，需让Menu类实现Parcelable或Serializable，但这种方式不如传ID稳定（避免序列化失败、数据过大问题），且从Room重新查询能保证数据最新。

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