Kotlin Jetpack Compose：导航抽屉传递数据参数问题

核心问题是需要在全局范围存储用户选中的数据库条目ID，这样导航抽屉切换页面时能获取到该ID并构建正确的路由。以下是具体实现步骤：

1. 创建共享ViewModel存储选中的ID #

创建一个跨页面共享的ViewModel，用于持久化保存用户选中的条目ID：

import androidx.lifecycle.ViewModel
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.StateFlow
import kotlinx.coroutines.flow.asStateFlow

class AppViewModel : ViewModel() {
    private val _selectedEntryId = MutableStateFlow<Int?>(null)
    val selectedEntryId: StateFlow<Int?> = _selectedEntryId.asStateFlow()

    fun updateSelectedEntryId(id: Int) {
        _selectedEntryId.value = id
    }
}

2. 在首页选中ID时更新ViewModel状态 #

修改首页的导航逻辑，在用户点击选择ID后，同步更新ViewModel中的ID值：

// 在MyAppNavHost的FrontPage composable节点中
composable(FrontPageDestination.route) {
    val viewModel = viewModel<AppViewModel>()
    FrontScreen(
        navigateToSecondPage = { entryId ->
            viewModel.updateSelectedEntryId(entryId)
            navController.navigate("${SecondPageDestination.route}/${entryId}")
        }
    )
}

3. 在导航抽屉中使用保存的ID构建路由 #

在MyApp组件中获取ViewModel实例，点击抽屉项时读取保存的ID，构建完整的带参数路由：

@Composable
fun MyApp(
    modifier: Modifier = Modifier,
    navController: NavHostController = rememberNavController(),
) {
    val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
    val viewModel = viewModel<AppViewModel>()
    val selectedEntryId by viewModel.selectedEntryId.collectAsState()

    ModalNavigationDrawer(
        drawerState = drawerState,
        modifier = Modifier,
        drawerContent = {
            ModalDrawerSheet(
                modifier = Modifier.fillMaxWidth(0.5f),
            ) {
                Text(
                    stringResource(R.string.meat_space),
                    textAlign = TextAlign.Center
                )
                Divider()

                // ... 其他抽屉项

                NavDrawerItem(
                    label = SecondPageDestination.titleRes,
                    onClick = {
                        selectedEntryId?.let { id ->
                            navController.navigate("${SecondPageDestination.route}/${id}") {
                                launchSingleTop = true
                            }
                        } ?: run {
                            // 无选中ID时的 fallback 逻辑，比如导航回首页
                            navController.navigate(FrontPageDestination.route)
                        }
                        coroutineScope.launch { drawerState.close() }
                    }
                )
            }
        }
    ) {
        // ... 原Scaffold内容
    }
}

错误原因说明 #

你之前的两种导航方式都存在语法/逻辑错误：

• 方式一直接使用routeWithArgs，其中的{entryId}是路由占位符，不是实际ID值，导航组件无法匹配到具体目的地
• 方式二的{$entryIdArg}写法错误，应该替换为实际的变量值，而非保留占位符语法

补充验证 #

确保SecondPageDestination的路由定义符合规范：

object SecondPageDestination {
    const val route = "secondpage"
    const val entryIdArg = "entryId"
    val routeWithArgs = "$route/{$entryIdArg}"
    // ... 其他属性
}

在SecondPageScreen中，既可以通过导航参数获取ID，也可以直接从ViewModel读取，后者更简洁：

@Composable
fun SecondPageScreen() {
    val viewModel = viewModel<AppViewModel>()
    val entryId by viewModel.selectedEntryId.collectAsState()
    // 使用entryId进行业务逻辑处理
}

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