Auto Height Jetpack 组合线圈图像答案

【问题标题】：Auto Height Jetpack Compose Coil ImageAuto Height Jetpack 组合线圈图像
【发布时间】：2021-10-24 17:30:26
【问题描述】：

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

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

我尝试使用.fillMaxHeight() 和.fillMaxSize()，但它不起作用。有什么办法可以实现吗？

【问题讨论】：

标签： android kotlin android-jetpack-compose coil

【解决方案1】：

当视图width/height 之一被计算为零时会发生这种情况，这意味着它不应显示且无需下载。在撰写跟踪器上的this issue 中查看有关原因的更多信息。

您应该使您的尺寸不等于零。根据您的布局，可以使用不同的宽度/高度/纵横比修饰符来完成。

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

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

【讨论】：

非常感谢。这个终于解决了。

【解决方案2】：

如果您的图像 OriginalSize 对于您的组合来说太小了，您也可以在您的构建器中使用 scale(Scale.FIT)。

您的图片将最大限度地适合您的组合，同时保持其纵横比。

Image(
    rememberImagePainter(
        data = user?.photoUrl?:"",
        builder = {
            size(OriginalSize)
            scale(Scale.FIT)
            transformations(CircleCropTransformation())
        }
    ),
    contentDescription = "Picture",
    contentScale = ContentScale.FillWidth
)

【讨论】：