Question

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

Answer 1

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

将 fillMaxSize 添加到图像：

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

Answer 2

这取决于带有 Painter 的 Image 实现

<块引用>

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

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

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

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

在您的情况下，您可以在 fillMaxWidth()

中使用修饰符 Image

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

通过这种方式，Image 可组合填充父空间。

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

2 个答案: