如何使用 Jetpack Compose 中的 ViewModel 将选定的数据从一个屏幕传递到另一个屏幕？ （向后）

Question

我正在使用 Jetpack Compose 构建 Android 应用程序，并且在使用 ViewModel 将所选数据从一个屏幕传递到另一个屏幕时遇到问题。

这就是我想要实现的目标：

1. 屏幕 A 有一个打开屏幕 B 的点击侦听器。

2. 屏幕 B 显示项目列表，用户可以选择一项。

3. 在屏幕 B 中选择一个项目后，我想使用 ViewModel 将所选数据传递回屏幕 A。

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

在屏幕 B 中，我正在更新 ViewModel 中选定的数据，如下所示：

viewModel.updateSelectedMusicItem(selectedMusicItem)
navController.navigateUp()

在屏幕 A 中，我尝试观察所选数据，如下所示：

val selectedMediaListState by viewModel.selectedMusicItem.collectAsState()

但是，当我从屏幕 B 导航回来时，屏幕 A 中的所选数据并未更新。

任何人都可以帮助我了解如何使用 Jetpack Compose 中的 ViewModel 将所选数据从一个屏幕正确传递到另一个屏幕吗？任何见解或建议将不胜感激。谢谢！

Answer 1

这是我传递数据的简单方法。

（在您的情况下，我不知道您的视图模型实现）

在导航页面中

@Composable
fun AppNavigation(){
 var selectedMusicItem by remember{ mutableStateOf<MusicItem?>(null) }

NavHost(navcontrol, startDestination = "screenA"){

 composable(route = "screenA"){
 ScreenA(navController,musicItem = selectedMusicItem)
 }

 composable(route = "screenB"){
 ScreenB(navController,selectedMusicItem = { music ->
  //call back from selected item
  selectedMusicItem = music
  })
 }

 }
}

screenA 和 screenB 可组合项是

 @Composable
fun ScreenA(navController: NavController,musicItem: MusicItem? ){
Button(onClick = { navController.navigate(route = "ScreenB") }) {

 }
}
@Composable
fun ScreenB(navController: NavController, selectedMusicItem: (MusicItem) -> 
Unit){
Button(
    onClick = {
        //here i pass the object as inside of callback
        selectedMusicItem(MusicItem.First)
        navController.navigate(route = "ScreenA")
    }
) {
    Text(text = "select First MusicItem")
}
}

使用此解决方案不会导致任何问题，但过度使用可能会导致 CallbackHell，只有在找不到任何其他更好的解决方案时才使用该解决方案。