当使用Coil的Crossfade时，Image 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 - 我需要的正确显示。

我想使用交叉淡入，因为图片需要一点时间来加载，我希望在屏幕第一次加载时显示图片，而不是让用户向下滚动以便正确显示图片。

已经查找了一些资料，但无法解决这个问题，有任何线索吗？

- Tonnie

---

不要将修饰符设置为fillMaxWidth()。尝试将其设置为固定宽度，看看是否解决了问题。在加载图像时，Compose更喜欢使用固定值。 - Johann

@Johann 感谢您的建议，我尝试将宽度设置为固定的300.dp，但没有看到任何区别。这是Coil上的一个错误，如下面我的答案所述。 - Tonnie

Answer 1

实际上，我遇到的问题是一个已报告的错误，其中提取的内容如下：

... "为了暂时解决这个问题，可以将占位符的大小减小到小于加载图像的大小。在示例项目中，可以通过减小ic_food的宽度和高度来实现这一点。 我尝试研究了一下，似乎是因为占位符图像比加载的图像更大（并且具有不同的纵横比），导致CrossfadePainter的内在大小基于占位符的大小"。

为了解决这个问题，我简单地在dimens（24 x 24）中使用了一个较小的占位符，并保留了Crossfade，这解决了问题。

- Tonnie