自动高度 Jetpack 组合线圈图像

Question

我正在尝试使用 Jetpack Compose Coil 显示具有填充宽度和自动高度的图像。我希望图像采用完整宽度和自动高度。但图像仅在我指定固定高度时显示。

Image(
    painter = rememberImagePainter(
        data = post.image
    ),
    contentDescription = null,
    contentScale = ContentScale.Crop,
    modifier = Modifier.fillMaxWidth()
)

我尝试使用.fillMaxHeight()and.fillMaxSize()但它不起作用。我有什么办法可以实现这个目标吗？

Answer 1

width当视图/之一height计算为零时会发生这种情况，这意味着它不应该显示并且不需要下载它。在 compose tracker 上查看有关此问题的更多原因。

您应该使您的大小不等于零。根据您的布局，可以使用宽度/高度/纵横比修改器的变化来完成。

如果您想获得原始尺寸的图像，您可以添加size(OriginalSize)到画家builder。这将强制图像开始加载。此参数使您的视图下载完整大小的图像并将其放入内存中，而不针对当前视图进行优化。因此，只有当您确定图像不会太大并且您确实无法添加使用尺寸修饰符时，请小心使用它。

Image(
    painter = rememberImagePainter(
        data = post.image,
        builder = {
            size(OriginalSize)
        },
    ),
    contentDescription = null,
    contentScale = ContentScale.Crop,
    modifier = Modifier.fillMaxWidth()
)

Answer 2

最新的Coil 2.1.0你可以这样做：

val model = ImageRequest.Builder(LocalContext.current)
            .data(imageUrl)
            .size(Size.ORIGINAL)
            .crossfade(true)
            .build()
val painter = rememberAsyncImagePainter(model)
Image(
     modifier = Modifier.fillMaxWidth(),
     painter = painter,
     contentDescription = null,
     contentScale = ContentScale.FillWidth
    )