如何使來自 API 的所有圖像在 Jetpack Compose 中都是同一種尺寸？

Question

我有以下代表列表模型的可組合項 -

@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 = ""
            )
        } else {
            Image(
                modifier = Modifier
                    .size(90.dp)
                    .clip(RoundedCornerShape(10.dp)),
                painter =  painterResource(id = com.tinytap.R.drawable.tinytap),
                contentDescription = ""
            )
        }
        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
        )
    }
}

問題是我為 Image 和 AsyncImage 使用固定大小，但有時 API 會給我非常寬的圖像，導致我在 UI 中出現以下不一致 -

我怎樣才能使我的圖像顯示完全相同？ 我嘗試使用各種作物，但結果最終弄亂了我的形象

Answer 1

考慮到圖像可能更短、更高、更寬或更小。 為了解決這個問題，我建議您使用Coil這里有一個代碼示例可以解決您的問題：

 Card(
    modifier = Modifier.size(119.dp, 92.dp),
    shape = RoundedCornerShape(10.dp)
) {
    AsyncImage(
        model = ImageRequest.Builder(LocalContext.current)
            .data(imageURL)
            .build(),
        placeholder = painterResource(R.drawable.complex_placeholder),
        error = painterResource(R.drawable.complex_placeholder),
        contentDescription = "complex image",
        contentScale = ContentScale.Crop,//The line that will affect your image size and help you solve the problem.

        )
}

在任何情況下，上面的代碼將始終顯示帶有圖像的完全覆蓋的框，也不要忘記確定容器的大小（在我的示例中為 Card '119,92' ）。

要了解有關不同屬性及其對代碼的影響的更多信息，請選擇最適合您的屬性

在此處查看更多信息（附圖片參考）： 內容比例尺完全說明