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

Question

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

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

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

加载时：

加载时：

这是我的代码：

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

您可以将verticalArrangement 用作Center，将horizo​​ntalAlignment 用作CenterHorizo​​ntally，这将使列范围内的视图显示在中心。 虽然如果您的用例不是移动文本视图，只是将进度指示器放在图像的中心和顶部，我建议将图像和进度指示器都放在 Box 内，并以内容对齐为中心。 例如，

Box(contentAlignment = Alignment.Center) {
    CircularProgressIndicator()
    Image()
}

Answer 2

您可以使用来自 Coil 最新版本的SubcomposeAsyncImage 。

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

Answer 3

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

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