如何创建根据远程加载的图像大小自动调整大小的 Jetpack Compose 图像？

Question

我想显示一张符合以下规则的图片：

图像是远程的，需要在运行时加载。
在加载之前我们不知道图片的大小。
Image 视图应占据父级的整个宽度，并且应自动调整其高度以匹配远程加载的图像，这样就不会出现 cropping/stretching。

我尝试使用 Coil dependency 并且我有这个代码：

Image(
    painter = rememberImagePainter(viewModel.fullImageUrl),
    contentDescription = null,
    contentScale = ContentScale.FillHeight,
    modifier = Modifier
        .fillMaxWidth()
        .aspectRatio(3.21428f) // TODO: Figure out how to set height/ratio based on image itself
)

当我删除 Image 的 contentScale 和 modifier 时，它的高度似乎总是为零。我不确定在 Coil 加载图像文件后确定自己的大小时应该如何使 Image 填充其父项的最大宽度。

Answer 1

当您使用 fillMaxWidth 设置灵活宽度时，您需要为您的 contentScale 使用 ContentScale.FillWidth:

Image(
    painter = rememberImagePainter(
        "https://via.placeholder.com/300.png",
    ),
    contentDescription = null,
    contentScale = ContentScale.FillWidth,
    modifier = Modifier
        .fillMaxWidth()
)

如果您的图像具有足够的优先级，则以下内容可以正常工作。但在某些情况下 coil 不会开始加载，因为它会认为图像大小为零，因此不需要显示它。对于这种情况，您可以向构建器添加 size(OriginalSize) 参数：

rememberImagePainter(
    "https://via.placeholder.com/300.png",
    builder = {
        size(OriginalSize)
    }
)

此参数使您的视图下载并放入内存中图像的完整大小，而不针对当前视图进行优化。所以使用它小心，只有当你确定图像不会太大并且你真的不能添加使用尺寸修饰符时。

如果图像正在加载但仍然不够space，您可以像这样设置纵横比：

val painter = rememberImagePainter("https://via.placeholder.com/300.png")
Image(
    painter = painter,
    contentDescription = null,
    contentScale = ContentScale.Fit,
    modifier = Modifier
        .fillMaxWidth()
        .then(
            (painter.state as? ImagePainter.State.Success)
                ?.painter
                ?.intrinsicSize
                ?.let { intrinsicSize ->
                    Modifier.aspectRatio(intrinsicSize.width / intrinsicSize.height)
                } ?: Modifier
        )
)

如果 none 有帮助并且 painter.state 没有从 Empty 改变，请尝试硬编码高度 ?: Modifier.height(10.dp) 让图像开始加载

如何创建根据远程加载的图像大小自动调整大小的 Jetpack Compose 图像？

How do I create a Jetpack Compose Image that resizes automatically based on a remotely loaded image size?

android

android-jetpack-compose

coil