Android Compose多StateFlow触发重复重组问题求解

问题描述 #

本人刚接触Compose与Kotlin，在使用StateFlow时遇到问题：ViewModel中存在两个StateFlow，二者互相触发重组，导致第二次调用API时出现旧数据显示的异常。

ViewModel代码 #

private val _networkUiState = MutableStateFlow<NetworkUIState>(NetworkUIState.Empty)
val networkUIState: StateFlow<NetworkUIState> = _networkUiState.asStateFlow()

private val _uiState = MutableStateFlow<UIState>(UIState.Empty)
val uiState: StateFlow<UIState> = _uiState.asStateFlow()

fun someAPICall() {
        _networkUiState.value = NetworkUIState.Loading
        networkJob = CoroutineScope(Dispatchers.IO + exceptionHandler).launch {
            try {
                val response = repo.apiCall()
                withContext(Dispatchers.Main) {
                    _networkUiState.value = NetworkUIState.Loaded
                    _uiState.value = UIState.DoSomething(response)
                }
            } catch (error: NetworkException) {
                _networkUiState.value = NetworkUIState.NetworkError(error)
            }
        }
}

// exceptionHandler calls _networkUIState.value = NetworkUIState.NetworkError(some error) as well

Compose代码 #

val networkUIState = viewModel.networkUIState.collectAsState().value
val uiState = viewModel.uiState.collectAsState().value

Column() {
    // ... UI code
    when (uiState) {
         is UIState.DoSomething -> {
             // read uiState.response and do something
         }
         is UIState.DoAnotherThing -> {
             // read response and do something else
         }
    }
    when (networkUIState) {
         is NetworkUIState.Error -> {
              // display network error
         }
         is NetworkUIState.Loading -> {
              // display loading dialog
         }
         else -> {}
    }
}

实际现象 #

• 首次调用API：
  1. NetworkUIState触发Loading状态（显示加载弹窗）
  2. NetworkUIState触发Loaded状态（隐藏加载弹窗）
  3. uiState触发DoSomething状态并携带响应数据
• 第二次调用API：
  1. NetworkUIState触发Loading状态（显示加载弹窗）
  2. uiState触发DoSomething状态并携带上次调用的旧响应数据
  3. NetworkUIState触发Loaded状态（隐藏加载弹窗）
  4. uiState触发DoSomething状态并携带新响应数据

问题核心：NetworkUiState触发重组时，UIState仍保留旧值，导致第二次调用API时先显示旧数据。需在必须分离两个StateFlow的前提下解决该问题。

解决方案 #

方案1：API调用开始时重置UIState #

每次调用someAPICall时，除了设置Loading状态，同时将uiState重置为初始状态（比如Empty）。这样当Loading触发重组时，UI会进入初始状态分支，不会显示旧数据：

fun someAPICall() {
        _networkUiState.value = NetworkUIState.Loading
        // 重置UIState，避免Loading时显示旧数据
        _uiState.value = UIState.Empty 
        networkJob = CoroutineScope(Dispatchers.IO + exceptionHandler).launch {
            try {
                val response = repo.apiCall()
                withContext(Dispatchers.Main) {
                    _networkUiState.value = NetworkUIState.Loaded
                    _uiState.value = UIState.DoSomething(response)
                }
            } catch (error: NetworkException) {
                _networkUiState.value = NetworkUIState.NetworkError(error)
            }
        }
}

方案2：UI层添加显示过滤逻辑 #

在Compose中，针对uiState的处理添加条件判断，仅当networkUIState不是Loading状态时，才显示业务数据：

Column() {
    // ... UI code
    when (uiState) {
         is UIState.DoSomething -> {
             // 加载状态下不显示旧数据
             if (networkUIState !is NetworkUIState.Loading) {
                 // read uiState.response and do something
             }
         }
         is UIState.DoAnotherThing -> {
             if (networkUIState !is NetworkUIState.Loading) {
                 // read response and do something else
             }
         }
    }
    when (networkUIState) {
         is NetworkUIState.Error -> {
              // display network error
         }
         is NetworkUIState.Loading -> {
              // display loading dialog
         }
         else -> {}
    }
}

这种方式无需修改ViewModel，仅在UI层控制显示逻辑，简单直接。

方案3：ViewModel层合并状态流（保留原始流） #

如果允许在ViewModel中添加组合逻辑但仍保留两个独立的StateFlow，可以使用combine将两个流合并为一个组合状态流，确保状态更新的原子性，UI仅收集这个组合状态：

// ViewModel中定义组合状态流
val combinedUIState = combine(networkUIState, uiState) { networkState, uiState ->
    Pair(networkState, uiState)
}.stateIn(
    scope = viewModelScope,
    started = SharingStarted.WhileSubscribed(5000),
    initialValue = Pair(NetworkUIState.Empty, UIState.Empty)
)

// Compose中收集组合状态
val (networkUIState, uiState) = viewModel.combinedUIState.collectAsState().value

这样networkUIState和uiState的更新会作为一个整体触发重组，避免中间状态的异常显示，同时原始的两个StateFlow依然保留，符合分离要求。

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