如何在使用 Jetpack Compose 加载 Android 图像之前调整图像组件的大小？

Question

我想为帖子加载图片（我使用的是 LazyColumn）并根据图片和设备宽度确定帖子的高度以对其进行缩放。

代码：

Image(
            modifier = Modifier
                .fillMaxWidth()
                .background(color = colorResource(R.color.post_color)),
            painter = rememberCoilPainter(
                request = post.urls[0].url,
                previewPlaceholder = R.drawable.ic_launcher_foreground
            ),
            contentDescription = ""
        )

一切看起来都很好，但在图像加载之前，帖子高度为 0，然后在图像加载时调整大小。

我尝试手动计算图像高度，但现在帖子的高度超出了需要：

.height(with(LocalDensity.current) { post.urls[0].height.toDp() })

我也尝试过使用自定义布局：

fun Modifier.proportionalHeight(widthPx:Int,heightPx:Int) = layout { measurable, constraints ->
// Measure the composable
val placeable = measurable.measure(constraints)
val ratio = placeable.width / widthPx

layout(placeable.width, (heightPx*ratio)){
    placeable.place(x = 0, y = 0, zIndex = 0f)
}
}

但它似乎与 LazyColumn 有问题，项目相互渲染。

截图如下：

Answer 1

您可以使用自定义的 Layout Composable

它将允许访问父项的约束，然后您可以设置相对于它的单个项目的大小。在层次结构的最高级别添加布局以获取整个屏幕作为父级。那么你得到的约束是实际的屏幕尺寸。以 compose codelab 中的布局来全面了解