Jetpack Compose中如何等待协程执行完毕后调用secondScreen

核心思路 #

通过ViewModel管理加载状态和数据状态，在Composable中根据状态分支渲染UI：加载时显示加载组件，加载完成且数据就绪后再渲染SecondScreen。

具体实现步骤 #

1. 改造ViewModel，维护加载与数据状态

在ViewModel中使用mutableStateOf和mutableStateListOf管理状态，并用viewModelScope执行FireStore数据加载（确保协程生命周期与ViewModel绑定，避免Composable重组导致协程取消）：

class MyViewModel : ViewModel() {
    // 加载状态：true表示正在加载，false表示加载完成
    private val _isLoading = mutableStateOf(true)
    val isLoading: State<Boolean> = _isLoading

    // 存储加载的数据
    private val _myData = mutableStateListOf<YourDataType>()
    val myData: List<YourDataType> = _myData

    fun loadData() {
        viewModelScope.launch {
            try {
                _isLoading.value = true
                // 从FireStore获取数据的逻辑
                val firestoreData = FirebaseFirestore.getInstance()
                    .collection("your-collection")
                    .get()
                    .await()
                    .documents
                    .mapNotNull { it.toObject(YourDataType::class.java) }
                
                _myData.clear()
                _myData.addAll(firestoreData)
            } catch (e: Exception) {
                // 处理加载错误（比如记录日志、提示用户）
                e.printStackTrace()
            } finally {
                // 无论成功失败，都标记加载完成
                _isLoading.value = false
            }
        }
    }
}

2. 在主页面根据状态渲染UI

使用LaunchedEffect触发首次数据加载，然后根据isLoading和myData的状态决定显示内容：

@Composable
fun MainScreen(viewModel: MyViewModel = viewModel()) {
    // 首次进入页面时触发数据加载，Unit作为key确保只执行一次
    LaunchedEffect(Unit) {
        viewModel.loadData()
    }

    when {
        viewModel.isLoading.value -> {
            // 加载中UI：居中显示进度条
            Box(
                modifier = Modifier.fillMaxSize(),
                contentAlignment = Alignment.Center
            ) {
                CircularProgressIndicator()
            }
        }
        viewModel.myData.isNotEmpty() -> {
            // 数据加载完成，渲染SecondScreen并传入数据
            SecondScreen(data = viewModel.myData)
        }
        else -> {
            // 数据为空的情况：显示空状态提示
            Box(
                modifier = Modifier.fillMaxSize(),
                contentAlignment = Alignment.Center
            ) {
                Text(text = "暂无数据")
            }
        }
    }
}

3. 目标页面接收数据并渲染

@Composable
fun SecondScreen(data: List<YourDataType>) {
    // 根据实际需求展示数据，示例用LazyColumn列表
    LazyColumn(modifier = Modifier.fillMaxSize()) {
        items(data) { item ->
            Text(
                text = item.toString(),
                modifier = Modifier.padding(16.dp)
            )
        }
    }
}

关键注意点 #

• 不要在Composable的coroutineScope中执行数据加载：Composable的协程作用域会随重组取消，而viewModelScope与ViewModel生命周期绑定，更稳定。
• 通过状态驱动UI：Compose的核心是状态管理，所有UI变化都应由状态触发，避免手动控制UI渲染时机。
• 可扩展错误状态：如果需要处理加载失败的场景，可以在ViewModel中添加_error状态，在Composable中显示错误提示（比如重试按钮）。

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