android - Jetpack Compose 中的 adjustViewBounds 模拟
问题描述
我正在尝试使图像占据容器宽度并根据图像比例具有高度。在 XML 中,我会使用adjustViewBounds
on ImageView
。Compose 中有类似物吗?如果没有,我怎样才能做到这一点?
解决方案
0.1.0-dev09 更新
SimpleImage
已弃用并取而代之的Image
是更可定制的-至少它允许设置修饰符。保持图像比例的总体思路保持不变:
val image = imageResource(R.drawable.android_studio_logo)
val imageRatio = image.width.toFloat() / image.height.toFloat()
Image(
image = image,
contentScale = ContentScale.Crop,
modifier = LayoutWidth.Fill + LayoutAspectRatio(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)
当然,为了更好的可重用性和可读性,我们可以将它包装在一个函数中。
结果如下所示:
推荐阅读
- c# - 使用 hadlebars dot net 在车把根中设置变量
- reactjs - 初始化私有 npm 包会产生超长依赖
- sql-server - 多用户访问的Web服务访问问题
- authentication - 通过 keycloak 使用签名的 jwt 对服务帐户进行身份验证
- java - 为什么在类文件中可以看到泛型类型信息?
- amazon-web-services - 识别 AWS 中已弃用的 IAM 角色?
- django - Django:如何在 order_by 中处理特殊字符
- matrix - 如何计算 ARKit 的 ARCamera 给出的投影矩阵?
- swift - UIViewControllerRepresentable 之间的交互可能吗?
- typescript - 如何对过滤 Object.entries 进行类型保护?