线圈：加载指示器堆叠在图像顶部而不是替换图像？

Question

我正在使用 Jetpack Compose 和 Coil 将照片加载到图像中。我想在加载图像时显示加载指示器，该指示器在加载时替换图片。但是我无法弄清楚并使其正常工作。我的代码的问题是加载指示器正在图像顶部加载（向左，因为我没有设置中心对齐，但它与中心对齐具有相同的行为，只是它位于图像顶部的中心） 。由于框中有额外的项目，它会强制文本视图下降。

有想法该怎么解决这个吗？我想在盒子中央显示加载指示器。

如果有帮助的话，这是带有外观布局的照片。

加载时：

加载时：

这是我的代码：

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

            val state = painter.state
            if (state is AsyncImagePainter.State.Loading || state is AsyncImagePainter.State.Error) {
                CircularProgressIndicator(
                    color = MaterialTheme.colors.primary,
                    modifier = Modifier.scale(2f)
                )
            }

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

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

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

Answer 1

您可以使用SubcomposeAsyncImageCoil 最新版本。

SubcomposeAsyncImage(
    model = image,
    contentDescription = null,
    loading = { CircularProgressIndicator() },
)

Answer 2

您不需要自定义代码，只需使用SubcomposeAsyncImage库提供的内置代码：

SubcomposeAsyncImage(
    model = "https://example.com/image.jpg",
    loading = {
        CircularProgressIndicator()
    },
    contentDescription = stringResource(R.string.description)
)