Jetpack Compose 显示像素化的缩放图像

Question

我正在从 XML 布局迁移到 Jetpack Compose，并注意到图像可组合项在图像被裁剪时无法像

ImageView

那样缩放图像。

顶部的图像是通过 Jetpack Compose 添加的，底部的图像是

ImageView

。 为了进行比较，我将它们并排添加，如下所示：

Column {
    Image(
        painter = painterResource(id = R.drawable.my_image),
        contentDescription = null,
        contentScale = ContentScale.Crop,
        modifier = Modifier.size(280.dp)
    )
    Spacer(
        modifier = Modifier.height(4.dp)
    )
    AndroidView(
        factory = { context ->
            ImageView(context).apply {
                scaleType = ImageView.ScaleType.CENTER_CROP
                setImageResource(R.drawable.my_image)
            }
        },
        modifier = Modifier.size(280.dp)
    )
}

效果取决于所使用的图像，我注意到它主要在低端设备上突出，但是我希望 Jetpack Compose 具有相同或更高的图像质量，因为它是在 Android 上构建 UI 的新框架。

有什么我缺少的东西可以给我与

ImageView

相同的质量吗？

Answer 1

如果你有一个矢量图像，你应该使用ImageVector.vectorResource而不是painterResource

Icon(
        imageVector = ImageVector.vectorResource(id = R.drawable.vectorId),
        contentDescription = "bar action image",
        tint = if (!uiData.enabled) LightSteelBlue else uiData.iconTint,
        modifier = Modifier.size(iconScaleDefault)
    )

因为，当您使用光栅图像时，重新缩放可能会像素化。 另请参阅https://developer.android.com/jetpack/compose/graphics/images/compare

Answer 2

我对非常简单的形状也有同样的问题。对我来说，问题是我将

Modifier.scale(3f)

与

ContentScale.Crop

结合使用。

这样做解决了它：

Image(
    modifier = Modifier
        .align(Alignment.Center)
        .wrapContentSize(unbounded = true),
    painter = painterResource(id = R.drawable.ic_vector),
    contentScale = FixedScale(3f),
    contentDescription = null
)

我不确定比例修改器在这里起什么作用，以及使用

Modifier.size()

时会发生什么变化，但你可以尝试这个：

Image(
    painter = painterResource(id = R.drawable.my_image),
    contentDescription = null,
    contentScale = FixedScale(1f),
    modifier = Modifier.size(280.dp)
)