ContentScale.FillWidth 不工作 Jetpack Compose

Question

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

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 缩放，正方形的整个宽度将被图像填充，但由于图像的高度不够，因此图像将居中垂直，在正方形的上部和下部留下空白。