自动高度 Jetpack Compose 线圈图像

Question

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

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

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

Answer 1

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

你应该让你的尺寸不等于零。根据您的布局，可以使用 width/height/aspect 比率修饰符的变体来完成。

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

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

Answer 2

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

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

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

Answer 3

您可以为图像设置最小值 height/width，而不是使用影响图像优化的 size(OriginalSize)（例如 1.dp）。这将强制图像开始加载：

Image(
    painter = rememberImagePainter(url),
    contentDescription = null,
    modifier = Modifier
        .fillMaxWidth()
        .defaultMinSize(minHeight = 1.dp),
)

自动高度 Jetpack Compose 线圈图像

Auto Height Jetpack Compose Coil Image

android

kotlin

android-jetpack-compose

coil