Jetpack Compose中ViewModel创建错误引发界面异常的问题排查

核心错误 #

你在HomeScreen Composable中直接通过val viewModel = HomeViewModel()实例化ViewModel，这会导致每次Composable重组时都会创建一个全新的HomeViewModel实例。

每次新ViewModel创建时，内部的counter流都会从头开始发射0，旧ViewModel的流则被废弃。这种循环造成了屏幕数字始终显示0且不断闪烁的现象——重组触发新ViewModel创建，新流发射0又引发重组，往复循环。

正确实现方式 #

在Jetpack Compose中，必须使用viewModel()函数（需依赖androidx.lifecycle:lifecycle-viewmodel-compose）来获取ViewModel实例，它会确保ViewModel与组件生命周期绑定，不会在重组时重复创建：

@Composable
fun HomeScreen(navController: NavHostController) {
  // 使用viewModel()获取实例，而非直接new
  val viewModel = viewModel<HomeViewModel>()

  val count by viewModel.counter.collectAsStateWithLifecycle()

  Text(text = "$count")
}

class HomeViewModel: ViewModel(){
  val counter = flow {
    var count = 0
    while (true) {
      emit(count++)
      delay(200)
    }
  }.stateIn(
    viewModelScope,
    SharingStarted.WhileSubscribed(5_000),
    initialValue = 0
  )
}

补充说明 #

这是个容易忽略的基础问题，ViewModel的实例管理必须依托Jetpack的ViewModelProvider机制（Compose的viewModel()函数封装了该逻辑），才能保证ViewModel生命周期独立于Composable重组，正确维护状态。

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