android - Jetpack Compose 中的 adjustViewBounds 模拟

Question

我正在尝试使图像占据容器宽度并根据图像比例具有高度。在 XML 中，我会使用 adjustViewBounds在 ImageView . Compose 中有类似物吗？如果没有，我怎样才能做到这一点？

Answer 1

Compose 1.0+ 的更新SimpleImage已弃用并替换为 Image这更可定制 - 至少它允许设置修饰符。保持图像比例的总体思路保持不变:

val painter = painterResource(id = R.drawable.android_studio_logo)
val imageRatio = painter.intrinsicSize.width / painter.intrinsicSize.height
Image(
    painter = painter,
    contentDescription = null,
    modifier = Modifier
        .fillMaxWidth()
        .aspectRatio(imageRatio)
)

0.1.0-dev06 的旧答案
我不认为像 adjustViewBounds 这样的东西目前在 0.1.0-dev06 中支持开箱即用。
通过查看源代码， SimpleImage似乎无法自定义。它所做的只是在 Box 上绘制图像。与图像完全相同的大小:

@Composable
fun SimpleImage(
    image: Image,
    tint: Color? = null
) {
    with(DensityAmbient.current) {
        val imageModifier = ImagePainter(image).toModifier(
            scaleFit = ScaleFit.FillMaxDimension,
            colorFilter = tint?.let { ColorFilter(it, BlendMode.srcIn) }
        )
        Box(LayoutSize(image.width.toDp(), image.height.toDp()) + ClipModifier + imageModifier)
    }
}

但基于该实现，效果类似于 adjustViewBounds可以通过使用不同尺寸的改性剂来实现。我们可以应用 LayoutWidth.Fill 而不是具体的确切尺寸占据整个宽度，然后使用 LayoutAspectRatio 调整高度与图像的比例:

val image = imageResource(R.drawable.android_studio_logo)
val imageRatio = image.width.toFloat() / image.height.toFloat()
val imageModifier = ImagePainter(image).toModifier(scaleFit = ScaleFit.FillMaxDimension)
Box(LayoutWidth.Fill + LayoutAspectRatio(imageRatio) + imageModifier)

当然，为了更好的可重用性和可读性，我们可以将它包装在一个函数中。
结果如下所示: