Android Jetpack Compose - 图像无法缩放到框的宽度和高度答案

【问题标题】：Android Jetpack Compose - Image can't scale to box's width and HeightAndroid Jetpack Compose - 图像无法缩放到框的宽度和高度
【发布时间】：2021-07-13 01:22:43
【问题描述】：

已创建 ImageCard 视图，用于在 android jetpack compose 中创建列表但有些图像无法达到 Box 小部件的宽度和高度。

使用 640*427 图像并像图像 1 一样输出。
使用 6720*4480 的图像，看起来像图 2。

使用以下代码创建 ImageCard。

ImageCard函数的用法：在setContent{}函数中调用ImageCardData函数

@Composable
fun ImageCard(
    painter: Painter,
    title: String,
    contentDescription: String,
    modifier: Modifier = Modifier
) {
    Card(
        modifier = modifier.fillMaxWidth(),
        shape = RoundedCornerShape(10.dp),
        elevation = 5.dp
    ) {
        Box(
            modifier = Modifier.height(200.dp)
        ) {
            Image(
                painter = painter,
                contentDescription = contentDescription,
                contentScale = ContentScale.Crop
            )
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .background(
                        brush = Brush.verticalGradient(
                            colors = listOf(
                                Color.Transparent,
                                Color.Black
                            ),
                            startY = 50f
                        )
                    )
            )
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(12.dp),
                contentAlignment = Alignment.BottomStart
            ) {
                Text(
                    text = title,
                    style = TextStyle(color = Color.White, fontSize = 16.sp)
                )
            }
        }
    }
}

@Composable
fun ImageCardData() {
    val painter = painterResource(id = R.drawable.engagement)
    val title = "Sample Text Title"
    val description = "This is sample Image Description"
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    ) {
        ImageCard(
            painter = painter,
            title = title,
            contentDescription = description
        )
    }
}

【问题讨论】：

标签： android kotlin android-jetpack-compose

【解决方案1】：

您的图像视图大小由它的内容计算，因为它没有任何大小修饰符。

在图片中添加fillMaxSize：

Image(
    painter = painter,
    contentDescription = contentDescription,
    contentScale = ContentScale.Crop,
    modifier = Modifier.fillMaxSize()
)

【讨论】：

【解决方案2】：

这取决于Image 的实现和Painter

创建一个可组合的布局并绘制给定的Painter。这将尝试根据Painter 的固有大小调整可组合对象的大小。但是，可以提供可选的Modifier 参数来调整大小或绘制其他内容（例如背景）

这意味着在较大尺寸的父容器中使用 640*427 图像时，Image 可组合尺寸是 Painter 的原始尺寸。
ContentScale 应用的比例因子基于这些尺寸和源 = 目标，不会改变原始 Painter 的固有尺寸。

Image(
        painter = painter,
        contentDescription = contentDescription,
        contentScale = ContentScale.Crop
)

使用 6720*4480 的图像时，Image 的大小大于父容器，这样Image 可组合可填充所有可用空间。

在您的情况下，您可以在 Image 中使用修饰符 fillMaxWidth() 解决

Image(
        modifier =Modifier.fillMaxWidth(),
        painter = painter,
        contentDescription = contentDescription,
        contentScale = ContentScale.Crop
)

以这种方式Image 可组合填充父空间。

【讨论】：