使用 Jetpack Compose 使用纵横比线圈的图像缩放答案

【问题标题】：Image scale using aspect ratio coil using jetpack compose使用 Jetpack Compose 使用纵横比线圈的图像缩放
【发布时间】：2022-12-06 15:22:58
【问题描述】：

我需要显示来自 uri/文件路径的图像，大图像 1300x1600 分辨率。需要保持纵横比。我试过线圈但没有给出理想的结果，仍然显示大图像。不确定怎么了这是我试过的

val painter =
    rememberAsyncImagePainter(imageUri.value)

Image(
    painter = painter,
    contentScale = ContentScale.Fit,
    contentDescription = null,
    modifier = Modifier
        .padding(16.dp, 0.dp, 16.dp, 0.dp)
        .fillMaxWidth()
        .aspectRatio(painter.intrinsicSize.height / painter.intrinsicSize.width)
)

【问题讨论】：

问题可能是aspectRatio(painter.intrinsicSize.height / painter.intrinsicSize.width) 尝试更改为aspectRatio(painter.intrinsicSize.width / painter.intrinsicSize.height)
intrinsicSize 本身给出了未指定的错误大小

标签： android kotlin android-jetpack-compose aspect-ratio coil

【解决方案1】：

在显示图像时保持图像纵横比的一种可能解决方案是使用 coil-kt 库提供的 CoilImage 组件。您可以指定所需的图像宽度和高度，CoilImage 组件在显示图像时会自动保持图像的纵横比。这是一个例子：

val imageUri = "https://example.com/image.jpg"

CoilImage(
  data = imageUri,
  width = 1300,
  height = 1600,
  contentScale = ContentScale.Fit,
  contentDescription = null,
  modifier = Modifier
    .padding(16.dp, 0.dp, 16.dp, 0.dp)
    .fillMaxWidth()
)

您还可以使用 aspectRatio 修饰符来显式设置图像的纵横比，如下所示：

val imageUri = "https://example.com/image.jpg"

CoilImage(
  data = imageUri,
  width = 1300,
  height = 1600,
  contentScale = ContentScale.Fit,
  contentDescription = null,
  modifier = Modifier
    .padding(16.dp, 0.dp, 16.dp, 0.dp)
    .fillMaxWidth()
    .aspectRatio(1600f / 1300f)
)

我希望这有帮助！

【讨论】：

出现异常，未指定大小。我在约束布局中展示它。
AsyncImage(model = painter, contentScale = ContentScale.Fit, contentDescription = null, modifier = Modifier .padding(16.dp, 0.dp, 16.dp, 0.dp) .height(300.dp) .width(300. dp) .aspectRatio(painter.intrinsicSize.height / painter.intrinsicSize.width) )

【解决方案2】：

你可以使用类似的东西：

Image(
    painter = painter,
    contentScale = ContentScale.FillWidth,
    contentDescription = null,
    modifier = Modifier
        .padding(16.dp, 0.dp, 16.dp, 0.dp)
        .fillMaxWidth()
        .then(
            (painter.state as? AsyncImagePainter.State.Success)
                ?.painter
                ?.intrinsicSize
                ?.let { intrinsicSize ->
                    Modifier.aspectRatio(intrinsicSize.width / intrinsicSize.height)
                } ?: Modifier
        )
)

【讨论】：