Jetpack Compose CircularProgressIndicator加载状态下真机不旋转问题

开发者阿泽

2026-7-7

解决CircularProgressIndicator真机不转动的问题

核心原因

你的apiService.postData是同步阻塞的网络请求，而viewModelScope.launch默认在主线程执行，这会导致主线程被网络请求占用，无法处理UI动画帧。模拟器的线程调度相对宽松，所以动画能正常运行，但真机对主线程阻塞更敏感，直接导致进度条停止转动。

修复方案

将网络请求切换到IO线程执行，避免阻塞主线程：

修改ViewModel中的postData函数：

private val _uiState = MutableStateFlow<HomeUIState>(HomeUIState.Loading)
val uiState: StateFlow<HomeUIState> = _uiState

fun postData(data: String){
    viewModelScope.launch {
        // 发起请求前重置为Loading状态（适配用户触发操作时的加载场景）
        _uiState.value = HomeUIState.Loading
        
        // 切换到IO线程执行网络请求，释放主线程处理UI动画
        val result = withContext(Dispatchers.IO) {
            apiService.postData(data = data)
        }

        when(result) {
            is NetworkResponse.Success -> {
                Log.d("DataViewModel", "postData: Success")
                _uiState.value = HomeUIState.Success
            }
            is NetworkResponse.Failure -> {
                Log.d("DataViewModel", "postData: Failure")
                _uiState.value = HomeUIState.Error(errorMessage = result.error.toString(), showError = true)
            }
        }
    }
}

sealed interface HomeUIState {
    data object Success : HomeUIState
    data class Error(val errorMessage: String, val showError: Boolean = false) : HomeUIState
    data object Loading : HomeUIState
}