Jetpack Compose中Coil加载指示器叠在图片上方如何解决

两个异常均由布局结构错误导致：

• CircularProgressIndicator与Image为Column下的平级子组件，Column会按垂直排列规则为每个子组件分配独立布局空间，因此加载指示器会占据额外高度，直接挤压下方Text产生偏移
• 加载指示器未与Image放置在同一固定尺寸容器内，既无法被约束在图片区域内居中，也无法实现加载阶段占位替换图片的效果，只能悬浮在图片上层

使用Box作为图片区域的统一容器，给Box设置和原图片一致的120dp尺寸，将Image和加载指示器都作为Box的子组件：

• Box为堆叠布局，内部组件不会占用Column的额外垂直空间，完全不会挤压下方文本
• 加载指示器设置align(Alignment.Center)即可实现在图片容器内居中显示
• 加载/错误状态下指示器显示、占位，加载完成后图片自动展示，完全匹配预期效果

效果参考 #

• 图片加载完成效果：
• 图片加载中效果：

修复后代码 #

Column {
    val painter = rememberAsyncImagePainter(
        ImageRequest.Builder(LocalContext.current)
            .data(entry.imageUrl)
            .apply {
                crossfade(true)
                transformations()
            }
            .build()
    )
    val loadState = painter.state

    viewModel.getImageBackgroundColor(entry.imageUrl, LocalContext.current) { color ->
        dominantColor = color
    }

    Box(
        modifier = Modifier
            .size(120.dp)
            .align(CenterHorizontally)
    ) {
        Image(
            painter = painter,
            contentDescription = entry.name,
            modifier = Modifier.matchParentSize()
        )

        if (loadState is AsyncImagePainter.State.Loading || loadState is AsyncImagePainter.State.Error) {
            CircularProgressIndicator(
                color = MaterialTheme.colors.primary,
                modifier = Modifier
                    .scale(2f)
                    .align(Alignment.Center)
            )
        }
    }

    Text(
        text = entry.name,
        fontFamily = RobotoCondensed,
        fontSize = 20.sp,
        textAlign = TextAlign.Center,
        modifier = Modifier.fillMaxWidth()
    )
}

额外修复了原代码的隐藏问题：原实现中ImageRequest的build()方法被错误写在apply闭包内部，会导致图片请求构建逻辑异常，已调整到正确位置。

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