Jetpack Compose 如何在已有LazyColumn上方叠加CircularProgressIndicator

问题根因 #

• 布局层级顺序错误：Compose 同层级组件按代码书写顺序从下到上堆叠（先写的在下层，后写的在上层），你当前将进度条写在列表渲染逻辑之前，会被后渲染的LazyColumn覆盖
• 状态监听位置违规：你把删除状态的判断逻辑写在了LazyColumn作用域内，该作用域仅支持列表项相关API，这段逻辑会随列表重组反复执行，不符合状态监听的最佳实践
• 原代码存在语法错误：Failure分支中引用的变量r未定义，实际应该取resource.message

修改方案 #

你只需要用Box作为根布局调整层级，再把状态监听移到副作用函数中即可，修改后完整代码如下：

fun ItemsScreen(
    viewModel: ItemsViewModel = hiltViewModel()
) {
    val showProgressBarState = remember { mutableStateOf(false) }
    // 监听删除操作状态，用LaunchedEffect保证只在状态变化时触发
    LaunchedEffect(viewModel.s) {
        viewModel.s.collect { deleteState ->
            when(deleteState) {
                is Loading -> showProgressBarState.value = true
                is Success -> showProgressBarState.value = false
                is Failure -> Log.d(TAG, "Failure")
            }
        }
    }

    // 用Box作为根布局，后面的子组件会覆盖在前面的上层
    Box(modifier = Modifier.fillMaxSize()) {
        when(val resource = viewModel.state.value) {
            is Loading -> ShowProgressBar()
            is Success -> LazyColumn(modifier = Modifier.fillMaxSize()) {
                items(
                    items = resource.data
                ) { item ->
                    ItemCard(
                        item = item
                    )
                }
            }
            is Failure -> Text(
                text = resource.message, // 修复原代码的变量错误
                modifier = Modifier.padding(16.dp)
            )
        }
        // 进度条放在Box最后，永远在最上层
        if (showProgressBarState.value) { 
            ShowProgressBar() 
        }
    }
}

@Composable
fun ShowProgressBar() {
    // 可选：加半透明背景遮罩，避免进度条和下层内容混在一起看不清
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Black.copy(alpha = 0.3f)),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        CircularProgressIndicator()
    }
}

可选优化 #

如果你的viewModel.s是Cold Flow，建议使用collectAsStateWithLifecycle监听状态，更符合Android生命周期规范，写法如下：

val deleteState by viewModel.s.collectAsStateWithLifecycle(initialValue = Success(Unit))
LaunchedEffect(deleteState) {
    when(deleteState) {
        is Loading -> showProgressBarState.value = true
        is Success -> showProgressBarState.value = false
        is Failure -> Log.d(TAG, "Failure")
    }
}

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