Created ImageCard view for creating the list in android jetpack compose but some images can't scratch to Box widget's width and height.

Using 640*427 image and output like image 1.
Using 6720*4480 image and it's looking good like image 2.

Use below code to create ImageCard.

Usage of ImageCard function: Call ImageCardData function in setContent{} function

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

推荐答案

您的图像视图大小是通过它的内容来计算的,因为它没有任何大小修改器.

Add fillMaxSize to the image:

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

Kotlin相关问答推荐

如何在Kotlin中模拟www.example.com()?

映射中列表类型的Kotlin可空接收器?

有没有办法在 jetpack compose 中将 TextField 密码点图标增加得更大?

在 Kotlin 中实现并输入 Either

ActivityResultContracts TakePicture 结果总是返回 false

Kotlin:我可以将函数分配给 main 的伴随对象中的变量吗?

如何判断给定字符串是否多次包含另一个子字符串?

致命错误 LifecycleOwners 必须在 registerForActivityResult 开始之前调用 register

在 Scaffold Jetpack Compose 内的特定屏幕上隐藏顶部和底部导航器

Intellij 显示 build.gradle.kts 中的每一行都是红色的

Kotlin 的类型具体化使哪些在 Java 或 Scala 中无法实现的成为可能?

空对象引用上的 TransitionSet ArrayList.size()

这是 Kotlin 中的错误还是我遗漏了什么?

Kotlin out-projected 类型禁止使用

如何启用spring security kotlin DSL?

使用 rxbinding 时我应该取消订阅吗?

Kotlin Flow 收集后无法执行代码

将 androidx.constraintlayout:constraintlayout lib 更新到 2.0.2 版本后出现崩溃 isRtl () null 引用

在多平台子元素中使用kapt

Kotlin反射不可用