Android Jetpack Compose加载后数据不显示问题求助

核心问题分析 #

1. UI无法响应状态变化：Compose代码中直接取viewModel.state.value，仅能获取初始状态，后续ViewModel的状态更新无法触发UI重组，导致加载状态、数据变化无法及时显示。
2. 异步操作未正确等待：Repository中Firestore的异步回调未完成就发射了空数据的Success事件，UI先收到空列表，后续数据加载完成后无事件通知。
3. 状态更新覆盖属性：每次创建全新ForYouState对象，会清空未修改的属性（如Loading时重置已有数据），导致状态逻辑混乱。

修复代码 #

1. 修复Compose状态收集

@Composable
fun ForYouScreen(
    externalRouter: Router,
    lifecycleOwner: LifecycleOwner,
    viewModel: ForYouScreenViewModel = koinViewModel()
) {
    // 改用collectAsState订阅状态变化，自动触发UI重组
    val state by viewModel.state.collectAsState()

    Box(modifier = Modifier.fillMaxSize()) {
        LazyColumn(modifier = Modifier.fillMaxSize()) {
            items(state.newsArticles) { item ->
                AsyncImage(model = item?.image, contentDescription = null)
                item?.title?.let { Text(text = it) }
            }
        }
        if(state.error.isNotBlank()) {
            Text(
                text = state.error,
                color = MaterialTheme.colorScheme.error,
                textAlign = TextAlign.Center,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(horizontal = 20.dp)
                    .align(Alignment.Center)
            )
        }
        if(state.isLoading) {
            CircularProgressIndicator(modifier = Modifier.align(Alignment.Center))
        }
    }
}

2. 修复Repository异步逻辑

使用Firestore的Coroutine扩展await()替代回调，确保Flow等待数据加载完成后再发射事件：

class NewsRepositoryImpl : NewsRepository {
    override fun getNewsArticles(): Flow<Resource<List<NewsArticle?>>> = flow {
        emit(Resource.Loading())
        try {
            val querySnapshot = FirebaseFirestore.getInstance()
                .collection("newsArticles")
                .get()
                .await() // 等待异步操作完成
            
            val newsList = if (!querySnapshot.isEmpty) {
                querySnapshot.documents.map { doc ->
                    doc.toObject(NewsArticle::class.java)
                }
            } else {
                emptyList()
            }
            emit(Resource.Success(newsList))
        } catch (e: Exception) {
            emit(Resource.Error(e.message ?: "An unexpected error occurred"))
        }
    }
}

注意：需添加Firestore KTX依赖（版本号对应你的Firebase SDK版本）：

implementation "com.google.firebase:firebase-firestore-ktx:24.10.1"

3. 修复ViewModel状态更新

使用copy()基于当前状态修改，避免覆盖未变更的属性：

class ForYouScreenViewModel(
    private val getNewsArticlesUseCase: GetNewsArticlesUseCase
) : ViewModel() {
    private val _state = mutableStateOf(ForYouState())
    val state: State<ForYouState> = _state

    init {
        loadNewsArticles()
    }

    private fun loadNewsArticles() {
        getNewsArticlesUseCase().onEach { result ->
            _state.value = when(result){
                is Resource.Success -> {
                    _state.value.copy(
                        newsArticles = result.data ?: emptyList(),
                        isLoading = false,
                        error = ""
                    )
                }
                is Resource.Loading -> {
                    _state.value.copy(
                        isLoading = true,
                        error = ""
                    )
                }
                is Resource.Error -> {
                    _state.value.copy(
                        error = result.message ?: "An unexpected error occurred",
                        isLoading = false
                    )
                }
            }
        }.launchIn(viewModelScope)
    }
}

修复后流程说明 #

1. 页面启动后，ViewModel触发数据加载，发射Loading状态，UI显示CircularProgressIndicator。
2. Firestore数据加载完成后，Repository发射Success状态，ViewModel更新状态（关闭Loading，填充数据）。
3. Compose通过collectAsState感知状态变化，自动重组UI，隐藏Loading并展示数据。

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