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

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

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

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

对于风景图像，再次由于ContentScale.FillWidth缩放，正方形的整个宽度将被图像填充，但由于图像的高度不是足够了，所以图像将垂直居中，在正方形的上部和下部留下空白 space。

ContentScale.FillWidth 无法使用 Jetpack Compose

ContentScale.FillWidth is not working Jetpack Compose

android

android-jetpack-navigation

android-jetpack-compose