JetPack中圆形进度条问题：需等待PagerContent加载完成再隐藏

你的问题出在当前代码只判断API数据是否返回，就立刻切换到Pager组件，但PagerContent内部可能有耗时的加载操作（比如图片加载、复杂UI渲染），导致数据回来后页面卡顿，进度条却提前消失了。要让进度条等PagerContent完全加载好再隐藏，可以按下面的方式修改：

1. 改用独立的加载状态变量 #

把之前注释掉的isLoading变量启用，用它来控制进度条的显示，而不是直接判断selected是否为空。

2. 让PagerContent通知父组件加载完成 #

给PagerContent加一个回调参数，当它内部的耗时操作完成后，告诉父组件“我加载完了”。

3. 调整加载状态的更新逻辑 #

API请求完成后先不关闭加载，等当前显示的PagerContent加载完成后，再把isLoading设为false。

修改后的完整代码 #

fun Preview(Number: String) {
    var selected by remember { mutableStateOf<Train?>(null) }
    var isLoading by remember { mutableStateOf(true) }
    // 记录已经加载完成的页面索引，避免重复触发
    val loadedPages = remember { mutableSetOf<Int>() }

    LaunchedEffect(key1 = Unit) {
        // 模拟API请求延迟
        delay(1000)
        selected = data from API
    }

    // 监听选中数据和当前页面变化，判断是否可以关闭加载状态
    LaunchedEffect(selected, pagerState.currentPage) {
        if (selected != null && loadedPages.contains(pagerState.currentPage)) {
            isLoading = false
        }
    }

    if (isLoading) {
        Column(
            Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            CircularProgressIndicator(color = Color.Blue)
            Spacer(modifier = Modifier.height(10.dp))
            Text(text = "Loading Please Wait...")
        }
    } else {
        selected?.let { trainData ->
            HorizontalPager(
                state = pagerState,
                modifier = Modifier.fillMaxSize(),
                beyondBoundsPageCount = 2
            ) { index ->
                PagerContent(trainData[index]) {
                    // 标记当前页面已加载完成
                    loadedPages.add(index)
                }
            }
        }
    }
}

对应的PagerContent修改示例 #

如果PagerContent里有图片加载（以Coil为例），可以在图片加载完成后触发回调；如果是纯UI布局，用LaunchedEffect在组合完成后通知父组件：

@Composable
fun PagerContent(train: Train, onLoaded: () -> Unit) {
    Column(modifier = Modifier.fillMaxSize()) {
        // 示例：图片加载完成后触发回调
        AsyncImage(
            model = train.imageUrl,
            contentDescription = "Train Image",
            modifier = Modifier.fillMaxWidth().height(200.dp),
            onSuccess = {
                onLoaded()
            }
        )

        // 其他页面内容
        Text(text = "车次：${train.number}")
        Text(text = "名称：${train.name}")

        // 如果没有异步加载，纯UI布局的话，用这个LaunchedEffect在组件组合完成后触发
        // LaunchedEffect(Unit) {
        //     onLoaded()
        // }
    }
}

额外说明 #

• 如果你需要等待所有预加载的页面（因为设置了beyondBoundsPageCount=2）都加载完成再隐藏进度条，可以修改逻辑，判断loadedPages的数量是否等于总页面数
• 如果PagerContent有多个异步操作（比如同时加载图片和接口数据），可以在内部用多个状态变量跟踪，等所有操作都完成后再调用onLoaded

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