Content Scale.FillWidth不工作Jetpack Compose [英] ContentScale.FillWidth is not working Jetpack Compose

问题描述

我正在尝试制作一个Composable，我可以通过使用

传递任何大小的图像来填充其宽度来使用它

compose_version = 1.0.0-beta07

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

当我经过其他图像时，它工作正常，但当我经过宽度和高度相同的图像时，它不工作

如何修复此问题？

推荐答案

根据需要尝试传递与大小相关的修饰符，如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缩放，正方形的整个宽度将由图像填充，但由于图像的高度不够，因此图像将垂直居中，从而在正方形的上下两部分留出空白。

这篇关于Content Scale.FillWidth不工作Jetpack Compose的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！