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

Question

已创建用于在 android jetpack compose 中创建列表的 ImageCard 视图但有些图像无法抓取到 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
        )
    }
}

Answer 1

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

给图片添加fillMaxSize：

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

Answer 2

这取决于 Image 实现 Painter

Creates a composable that lays out and draws a given Painter. This will attempt to size the composable according to the Painter's intrinsic size. However, an optional Modifier parameter can be provided to adjust sizing or draw additional content (ex. background)

这意味着在具有更大尺寸的父容器中使用 640*427 图像，Image 可组合大小是 Painter 的原始大小。
ContentScale 应用的比例因子基于这些尺寸和 source = destination 并且不会改变原始 Painter 的固有尺寸。

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

使用 6720*4480 图像，Image 尺寸大于父容器，这样 Image 可组合项会填充所有可用的 space.

在您的情况下，您可以在 Image

中使用修饰符 fillMaxWidth() 来解决

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

通过这种方式，Image 可组合项填充了父项 space。

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

Android Jetpack Compose - Image can't scale to box's width and Height

android

kotlin

android-jetpack-compose