如何让进度指示器在数据完全加载前正常显示？

问题分析 #

你的代码存在几个关键问题导致进度指示器无法正常工作：

• 初始的DataOrException实例中loading字段未设置为true，导致页面初始化时不会触发进度条显示
• 两个if语句并列执行，可能出现进度条与内容同时渲染的冲突情况
• 未处理city为null的场景，直接调用toString()会引发空指针异常
• produceState块中直接赋值结果，未确保loading状态在数据加载完成后正确切换

修正方案 #

以下是调整后的代码，解决上述问题：

@Composable
fun MainScreen(
    navController: NavController,
    mainViewModel: MainViewModel = hiltViewModel(),
    city: String?
) {
    Log.d("TAG", "MainScreen: $city")
    
    // 处理city为空的情况，可根据业务需求调整提示逻辑
    val targetCity = city ?: run {
        Text("请选择有效城市")
        return@MainScreen
    }

    val weatherData = produceState<DataOrException<Weather, Boolean, Exception>>(
        initialValue = DataOrException(loading = true) // 初始状态强制开启loading
    ) {
        // 调用接口获取数据后，统一更新loading状态
        val result = mainViewModel.getWeatherData(city = targetCity)
        value = result.copy(loading = false)
    }.value

    // 使用when结构确保同一时间仅渲染一种状态
    when {
        weatherData.loading -> {
            // 让进度条居中显示，优化视觉体验
            Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                CircularProgressIndicator()
            }
        }
        weatherData.data != null -> {
            MainScaffold(weather = weatherData.data!!, navController)
        }
        weatherData.exception != null -> {
            // 添加异常状态提示，覆盖加载失败场景
            Text("加载失败：${weatherData.exception?.message}")
        }
        else -> {
            Text("暂无数据")
        }
    }
}

关键改动说明 #

• 初始状态配置：初始化DataOrException时将loading设为true，保证页面启动后立即显示进度条
• 空值安全处理：提前判断city是否为空，避免后续逻辑抛出异常
• 状态切换逻辑：数据加载完成后手动将loading设为false，确保状态正确流转
• 布局逻辑优化：用when替代并列if，避免多状态同时渲染；通过Box实现进度条居中显示
• 异常场景覆盖：添加错误状态提示，完善全流程的用户反馈

内容的提问来源于stack exchange，提问作者Anand Kumar Mehta