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)
}

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

如何解决这个问题？

- user15686227

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)
}

给定可用宽度，Image composable的高度将使用纵横比计算。因此，image composable将是最大宽度的正方形。

现在需要缩放图像以将其放置在此正方形composable中。这里将使用ContentScale.FillWidth来确定图像的位置和缩放。

对于竖直图片，图像将填满正方形的全宽，并在垂直方向上居中裁剪掉一些上部和下部的图像。

对于水平图片，由于ContentScale.FillWidth缩放的原因，图像将填满正方形的全宽，但是由于图像的高度不足，因此图像将在垂直方向上居中，留下正方形的上部和下部空白部分。

- Om Kumar

---

如果我添加aspectRatio(1f)，它会影响矩形图像吗？ - user15686227

我已经更新了答案，以澄清矩形图像场景。 - Om Kumar

谢谢兄弟。 - user15686227

纵横比救了我的一天:D 非常感谢。 - dudi