当 Coil 的 Crossfade 设置为 true 时，图像 ContentScale 应用不正确

Question

我正在使用 Coil 在 Jetpack Compose 中加载远程图像，但我遇到了一个奇怪的问题。

这是我正在使用的代码：

 Column() {

            Image(
                painter = rememberImagePainter(
                    data = recipe.featuredImage,
                    builder = {
                        crossfade(true)
                        placeholder(R.drawable.empty_plate)
                    }
                ),
                modifier = Modifier
                        .fillMaxWidth()
                        .height(225.dp),
                contentScale = ContentScale.Crop,
                contentDescription = null
            
            ) ....}

当我将淡入淡出设置为 true 时，图像不会被裁剪或拉伸以适合宽度。但是，当交叉淡化为 false 时，图像会被适当裁剪以适合宽度。

奇怪的是，当我将图像滚动出屏幕然后将图像滚动回屏幕时，即使将淡入淡出设置为 true，图像也会被正确裁剪。

图片 A - 图片显示不正确, 图片 B - 我需要的正确显示。

我想使用淡入淡出，因为图像加载需要一些时间，我想在屏幕第一次加载时显示图像，而不是用户必须向下滚动才能正确显示图像。

环顾四周但无法弄清楚如何解决这个问题，有线索吗？

Answer 1

实际上，我遇到的问题是reported bug，摘录如下：

...“为了暂时解决这个问题，可以将占位符的大小减小到小于加载图像的大小。在示例项目中，这可以通过减少 ic_food 的宽度和高度。我试着研究这个，它似乎正在发生，因为占位符图像比加载的图像更大（并且具有不同的纵横比）。这意味着 CrossfadePainter 的固有大小基于占位符的大小。

为了解决这个问题，我只是 在尺寸 (24 x 24) 中使用了一个较小的占位符 并保持交叉淡入淡出，这解决了问题。

当 Coil 的 Crossfade 设置为 true 时，图像 ContentScale 应用不正确

Image ContentScale not applied correctly when Coil's Crossfade is set to true

android

android-jetpack-compose

coil