如何让Jetpack Compose中API返回的图片统一尺寸？

问题根源在于你没有为AsyncImage和Image设置统一的contentScale属性，不同比例的图片在固定尺寸容器里会采用默认适配逻辑，导致显示效果参差不齐。

要让所有图片显示完全一致，只需为两个图片组件添加contentScale = ContentScale.Crop和alignment = Alignment.Center配置，具体修改如下：

@Composable
fun DashboardCard(
    modifier: Modifier = Modifier,
    model: DashboardCardModel,
    onCardClicked: (model: DashboardCardModel) -> Unit
) {

    Column(
        modifier = modifier
            .size(200.dp, 200.dp)
            .background(Color.Transparent)
            .padding(16.dp)
            .clickable {
                onCardClicked(model)
            },
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.SpaceAround
    ) {
        if (model.showDefaultThumbnail) {
            AsyncImage(
                modifier = Modifier
                    .size(90.dp)
                    .clip(RoundedCornerShape(10.dp)),
                model = model.thumbnailUrl,
                contentDescription = "",
                // 核心配置：按比例裁剪图片以填满容器，居中保留关键区域
                contentScale = ContentScale.Crop,
                alignment = Alignment.Center
            )
        } else {
            Image(
                modifier = Modifier
                    .size(90.dp)
                    .clip(RoundedCornerShape(10.dp)),
                painter = painterResource(id = com.tinytap.R.drawable.tinytap),
                contentDescription = "",
                // 同样配置统一显示逻辑
                contentScale = ContentScale.Crop,
                alignment = Alignment.Center
            )
        }
        Image(
            modifier = Modifier
                .size(25.dp)
                .padding(top = 10.dp)
                .alpha(if (model.isCurrentPostOfInterest) 1f else 0f),
            painter = painterResource(id = com.tinytap.R.drawable.post_of_interest),
            contentDescription = null
        )
        Text(
            modifier = Modifier.padding(top = 10.dp),
            fontSize = 16.sp,
            color = Color.White,
            text = model.title,
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
        )
        Text(
            text = model.author,
            fontSize = 12.sp,
            color = Color.LightGray,
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
        )
    }
}

逻辑说明： #

• ContentScale.Crop：让图片按自身比例缩放，直到完全填满90x90dp的容器，超出容器的部分会被自动裁剪，确保容器内没有空白区域。
• Alignment.Center：裁剪时默认保留图片的中心区域，避免裁剪掉主体内容（如果需要调整裁剪位置，可以换成Alignment.TopCenter等其他对齐方式）。

这样无论API返回的图片是宽屏还是竖屏比例，最终都会被处理成统一的正方形显示效果，解决UI不一致的问题。

内容的提问来源于stack exchange，提问作者Alon Shlider