ContentScale.FillWidth 不起作用 Jetpack Compose

Question

我正在尝试制作一个可组合项，我可以通过使用传递任意大小的图像来填充其宽度来使用它

compose_version = 1.0.0-beta07

@Composable 
fun image(image:Int){
          Image(painter = painterResource(image), 
          contentDescriptionn = null, contentScale = ContentScale.FillWidth)
}

当我传递其他图像时，它可以工作，但是当我传递宽度和高度相同的图像时，它不起作用

如何解决这个问题？

Answer 1

根据您的需要，尝试传递与大小相关的修饰符，例如Modifier.fillMaxWidth(), Modifier.width(100.dp), 。Modifier.size(24.dp)如果需要方形图像，则添加Modifier.aspectRatio(1f).

@Composable
fun Image(modifier: Modifier = Modifier, @DrawableRes image: Int){
    Image(
        modifier = modifier,
        painter = painterResource(image),
        contentDescription = null,
        contentScale = ContentScale.FillWidth)
}

Image(Modifier.fillMaxWidth(), image = R.drawable.sq1)

如果图像总是需要填充完整的可用宽度那么

@Composable
fun Image(modifier: Modifier = Modifier, @DrawableRes image: Int){
    Image(
        modifier = modifier.fillMaxWidth(),
        painter = painterResource(image),
        contentDescription = null,
        contentScale = ContentScale.FillWidth)
}

Image(image = R.drawable.sq1)

更新：矩形图像的澄清

@Composable
fun Image(modifier: Modifier = Modifier, @DrawableRes image: Int){
    Image(
        modifier = modifier.fillMaxWidth().aspectRatio(1f),
        painter = painterResource(image),
        contentDescription = null,
        contentScale = ContentScale.FillWidth)
}

对于给定的可用宽度，将使用宽高比计算图像可组合项的高度。因此，可组合的图像将是具有可能的最大宽度的正方形。

现在进行缩放以将图像放置在这个方形可组合项中。这里ContentScale.FillWidth将用于确定图像的位置和缩放比例。

对于肖像图像，图像将填充正方形的整个宽度，并垂直居中，裁剪掉图像的一些上部和下部。

对于横向图像，同样由于ContentScale.FillWidth缩放的原因，正方形的整个宽度将被图像填充，但由于图像的高度不够，因此图像将垂直居中，在正方形的上下部分留下空白区域正方形。