如何在Jetpack Compose中从单个页面跳转至多个目标页面

针对菜单点击跳转至差异化页面的需求，这里提供两种实用实现方案，替代原有的ID映射方式：

方案一：使用枚举类绑定页面目的地 #

通过定义页面枚举类型，将每个菜单项与对应页面直接关联，逻辑清晰且类型安全。

步骤1：定义页面枚举 #

enum class ScreenDestination {
    LOG, TODO, LESSONS, CONTACT
}

步骤2：扩展MenuData类 #

添加枚举字段存储对应页面：

data class MenuData(
    val id: Int,
    val title: String,
    val menuImageId: Int = 0,
    val destination: ScreenDestination // 新增目的地字段
)

步骤3：更新MenuModel列表 #

为每个菜单项指定对应的枚举值：

object MenuModel {
    fun menuModelList(context: Context) = listOf(
        MenuData(
            id = 1,
            title = context.getString(R.string.menu_log),
            menuImageId = R.drawable.menu_log,
            destination = ScreenDestination.LOG
        ),
        MenuData(
            id = 2,
            title = context.getString(R.string.menu_todo),
            menuImageId = R.drawable.menu_todo,
            destination = ScreenDestination.TODO
        ),
        // 其余菜单项同理配置
    )
}

步骤4：修改MenuCard与导航逻辑 #

在父组件中统一处理导航，MenuCard只需传递点击事件：

@Composable
fun MenuCard(
    menuInfo: MenuData,
    onMenuCardClick: (ScreenDestination) -> Unit,
    modifier: Modifier = Modifier
) {
    Surface(
        shape = MaterialTheme.shapes.small,
        elevation = 4.dp,
        modifier = modifier
            .clickable { onMenuCardClick(menuInfo.destination) }
    ) {
        // 原有UI渲染内容
    }
}

// 父组件中使用（基于Jetpack Compose Navigation）
@Composable
fun MenuScreen(navController: NavHostController) {
    val menuList = MenuModel.menuModelList(LocalContext.current)
    LazyColumn {
        items(menuList) { menu ->
            MenuCard(
                menuInfo = menu,
                onMenuCardClick = { destination ->
                    when(destination) {
                        ScreenDestination.LOG -> navController.navigate("log_screen")
                        ScreenDestination.TODO -> navController.navigate("todo_screen")
                        ScreenDestination.LESSONS -> navController.navigate("lessons_screen")
                        ScreenDestination.CONTACT -> navController.navigate("contact_screen")
                    }
                }
            )
        }
    }
}

方案二：直接在MenuData中绑定导航动作 #

如果需要更灵活的导航逻辑（比如传递参数、自定义跳转条件），可以将导航lambda直接存入MenuData。

步骤1：修改MenuData类 #

添加导航动作字段：

data class MenuData(
    val id: Int,
    val title: String,
    val menuImageId: Int = 0,
    val navigateAction: () -> Unit // 新增导航动作字段
)

步骤2：更新MenuModel列表 #

为每个菜单项直接定义导航逻辑：

object MenuModel {
    fun menuModelList(context: Context, navController: NavHostController) = listOf(
        MenuData(
            id = 1,
            title = context.getString(R.string.menu_log),
            menuImageId = R.drawable.menu_log,
            navigateAction = { navController.navigate("log_screen") }
        ),
        MenuData(
            id = 2,
            title = context.getString(R.string.menu_todo),
            menuImageId = R.drawable.menu_todo,
            navigateAction = { navController.navigate("todo_screen") }
        ),
        // 支持带参数的导航：
        // navigateAction = { navController.navigate("lesson_detail/1") }
    )
}

步骤3：简化MenuCard逻辑 #

MenuCard无需额外回调，直接调用内置的导航动作：

@Composable
fun MenuCard(
    menuInfo: MenuData,
    modifier: Modifier = Modifier
) {
    Surface(
        shape = MaterialTheme.shapes.small,
        elevation = 4.dp,
        modifier = modifier
            .clickable { menuInfo.navigateAction() }
    ) {
        // 原有UI渲染内容
    }
}

// 父组件中使用
@Composable
fun MenuScreen(navController: NavHostController) {
    val menuList = MenuModel.menuModelList(LocalContext.current, navController)
    LazyColumn {
        items(menuList) { menu ->
            MenuCard(menuInfo = menu)
        }
    }
}

方案对比 #

• 方案一：类型安全，便于统一管理页面路由，适合页面结构固定的场景。
• 方案二：灵活性更高，支持复杂导航需求，但将导航逻辑与数据模型绑定，耦合度稍高。

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