列内的 AsyncImage 适合屏幕的整个高度而不是宽度

Question

有一个全景

AsyncImage

，我想用作我的应用程序的标题，在

lazycolumn

（带有

modifier.fillmaxwidth()

）内，它可以正确显示，只有屏幕的宽度。如果我切换到

column

（也与

modifier.fillmaxwidth()

），它会出错。

AsyncImage

不是适应屏幕的宽度，而是用屏幕的所有高度绘制，我只能看到图像左侧的一部分，因为现在图像的宽度非常大。

为什么会出现这种情况？

column

位于

topAppBar

的

Scaffold

中。

Column (
    modifier = modifier.fillMaxWidth()
) {
    HeaderComposable(header)
}

@Composable
fun HeaderComposable(header: Header, modifier: Modifier = Modifier) {
    AsyncImage(
        model = header.getImageRoute(),
        contentDescription = "",
        contentScale = ContentScale.Crop,
        modifier = modifier.fillMaxWidth()
    )
}

Answer 1

这就是

ContentScale.Crop

应该做的，它 统一缩放源，以便源的两个尺寸将等于或大于目标的相应尺寸。

如果你不限制高度，它将简单地使用

maxHeight

，除非最大高度是

Constraints.Infinity

。在这种情况下，显然不可能填充高度，并且只能填充宽度。这就是

LazyColumn

中发生的情况，因为它的子级是用

maxHeight = Constraints.Infinity

来测量的 - 与

Column

（没有

verticalScroll

）不同，后者具有有限的

maxHeight

。

您必须以某种方式限制高度，或者使用不同的内容比例，可能是

ContentScale.FillWidth

。