如何创建根据远程加载的图像大小自动调整大小的Jetpack Compose Image？ [英] How do I create a Jetpack Compose Image that resizes automatically based on a remotely loaded image size?

问题描述

我想显示符合以下规则的图像：

• 映像是远程的，需要在运行时加载。
• 在加载之前，我们不知道图像的大小。
• Image视图应采用父视图的全宽，并应自动调整其高度以匹配远程加载的图像，以便不会发生裁剪/拉伸。

我尝试使用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填充其父对象的最大宽度，同时确定其自身的大小。

推荐答案

当您使用fillMaxWidth设置灵活宽度时，您需要使用ContentScale.FillWidthcontentScale：

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)
    }
)

此参数使您的视图下载并放入内存中，而不会针对当前视图进行优化。因此，请谨慎使用它，只有在您确定图像不会太大并且确实不能添加使用大小修饰符的情况下。

---

如果正在加载图像，但仍然没有占用足够的空间，您可以这样设置纵横比：

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
        )
)

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

这篇关于如何创建根据远程加载的图像大小自动调整大小的Jetpack Compose Image？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！