可以简单地用 Compose 中的图像覆盖 CircularProgressIndicator 吗？

Question

我在 compose 中展示了从 URL 加载的 Image()，效果很好。当我从服务器获取图像时，我希望用户看到一个圆形微调器，以便他知道有什么东西要来了。加载图像后，应将微调器替换为加载的图像。问题是，即使在收到 URL 图像后，仍需要几秒钟才能在屏幕上呈现实际位图。目前，我只是将 Image 和 CircularProgressIndicator 彼此重叠放置在 Box 中。这样，图像一旦加载，就会简单地与进度微调器重叠，给人以“加载完成”的印象。我基本上是在“假装”，因为微调器仍在图像后面。

我的问题是这种方法是否是推荐的方法，或者是否有任何负面的性能影响，因为 afaic 微调器仍然会在图像后面转动。有谁知道 better/more-correct 方法吗？到目前为止，我还没有在 Image 可组合项中看到任何 OnRenderingComplete 回调。

这是我的代码

Box(modifier =Modifier.padding(2.dp), contentAlignment = Alignment.Center ){
    CircularProgressIndicator(modifier = Modifier
            .size(44.dp)
            .padding(3.dp),
        color = Color.White)
    Image(
        painter = rememberImagePainter(URL),
        contentDescription = null,
        modifier = Modifier
            .size(50.dp)
            .clip(CircleShape)
    )
}

TL;DR

在我看来，当屏幕上只有一个微调器和图像时，我的方法相对无害（它的简单性甚至可能使它合理）但我问自己如果我在以下位置使用这种方法是否也有效LazyColumn 每行有几张图片。

Answer 1

使用 Box 的方法完全没问题，但您可以使用画家状态仅在指示器加载时显示它，如下所示：

val painter = rememberImagePainter(URL)
if (painter.state is ImagePainter.State.Loading) {
    CircularProgressIndicator(Modifier)
}
Image(
    painter = painter,
    contentDescription = null,
    modifier = Modifier
)

可以简单地用 Compose 中的图像覆盖 CircularProgressIndicator 吗？

Is it ok to simply cover a CircularProgressIndicator with an Image in compose?

image

progress-bar

android-jetpack-compose

coil