Jetpack Compose中如何通过ViewModel实现选中数据回传至前序页面？

你的问题核心是页面A和B的ViewModel实例不共享，导致B更新的数据无法被A观察到。以下是具体的修复方案：

问题根源 #

默认情况下，每个Compose页面获取的ViewModel绑定到当前页面的导航栈条目上，A和B各自持有独立的ViewModel实例，B更新的是自身实例的数据，自然无法同步到A。

解决方案：共享ViewModel实例 #

让页面B获取与页面A相同的ViewModel实例，通过关联页面A的导航栈条目实现：

1. 保持ViewModel代码不变 #

class MyViewModel : ViewModel() {
    private val _selectedMusicItem = MutableStateFlow<MusicItem?>(null)
    val selectedMusicItem = _selectedMusicItem.asStateFlow()

    fun updateSelectedMusicItem(musicItem: MusicItem) {
        _selectedMusicItem.value = musicItem
    }
}

2. 页面A中获取并观察ViewModel #

使用collectAsStateWithLifecycle替代collectAsState，它更贴合Android生命周期，避免不必要的资源消耗：

@Composable
fun ScreenA(navController: NavHostController) {
    val viewModel = viewModel<MyViewModel>()
    // 观察选中数据
    val selectedMusicItem by viewModel.selectedMusicItem.collectAsStateWithLifecycle()

    // 展示选中结果
    selectedMusicItem?.let {
        Text("已选中：${it.name}")
    }

    // 跳转至页面B
    Button(onClick = { navController.navigate("screenB") }) {
        Text("选择音乐")
    }
}

3. 页面B中获取共享的ViewModel #

通过previousBackStackEntry获取页面A的导航栈条目，以此作为ViewModel的作用域，确保和A使用同一个实例：

@Composable
fun ScreenB(navController: NavHostController) {
    // 获取页面A的导航栈条目，若不存在则返回上一页
    val backStackEntry = navController.previousBackStackEntry ?: run {
        navController.navigateUp()
        return@Composable
    }
    // 绑定到A的导航栈条目，获取共享ViewModel
    val viewModel = viewModel<MyViewModel>(backStackEntry)

    // 示例列表（替换为你的实际数据源）
    val musicList = listOf(MusicItem("音乐1"), MusicItem("音乐2"), MusicItem("音乐3"))
    LazyColumn {
        items(musicList) { item ->
            ListItem(
                headlineContent = { Text(item.name) },
                onClick = {
                    // 更新选中数据并返回A
                    viewModel.updateSelectedMusicItem(item)
                    navController.navigateUp()
                }
            )
        }
    }
}

4. 依赖补充 #

使用collectAsStateWithLifecycle需要添加以下依赖到Module级别的build.gradle：

implementation "androidx.lifecycle:lifecycle-runtime-compose:2.6.2"

验证逻辑 #

当你在页面B选中条目后，ViewModel的_selectedMusicItem会更新，页面A通过collectAsStateWithLifecycle观察到StateFlow的变化，触发重组并展示最新选中的数据。

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