Coil AsyncImage返回栈后尺寸变大问题求助

问题根源 #

Coil（AsyncImage基于Coil实现）默认会根据加载时的Composable布局尺寸缓存适配后的图片。详情页加载的海报尺寸更大，返回列表页后，AsyncImage会复用这个大尺寸的缓存图，若列表项布局没有明确的尺寸约束，就会导致图片撑大布局。

解决方案 #

方案1：为列表/详情页设置独立的缓存键 #

通过为两个页面的ImageRequest设置不同的内存缓存键，让Coil分别存储不同尺寸的海报缓存，避免复用冲突。

列表页修改后代码：

AsyncImage(
    model = ImageRequest.Builder(LocalContext.current)
        .data(stringResource(id = R.string.base_image_url) + movie.posterPath)
        .placeholder(R.drawable.loading_image)
        .error(R.drawable.default_movie_image)
        .crossfade(true)
        .memoryCacheKey("list_movie_poster_${movie.id}") // 列表页专属缓存键
        .build(),
    modifier = Modifier.fillMaxSize(),
    contentDescription = null,
    contentScale = ContentScale.Crop,
)

详情页修改后代码：

AsyncImage(
    model = ImageRequest.Builder(LocalContext.current)
        .data(stringResource(id = R.string.base_image_url) + movie.poster_path)
        .placeholder(R.drawable.loading_image)
        .error(R.drawable.default_movie_image)
        .crossfade(true)
        .memoryCacheKey("detail_movie_poster_${movie.id}") // 详情页专属缓存键
        .build(),
    modifier = Modifier.fillMaxWidth().weight(0.6f),
    contentDescription = null,
    contentScale = ContentScale.Crop,
)

方案2：为列表项AsyncImage添加固定尺寸约束 #

直接限制列表项中AsyncImage的布局尺寸，无论缓存图片多大，都会被约束在指定范围内，通过ContentScale.Crop保证显示效果。

列表页修改后代码：

// 示例：给AsyncImage设置固定宽高
AsyncImage(
    model = ImageRequest.Builder(LocalContext.current)
        .data(stringResource(id = R.string.base_image_url) + movie.posterPath)
        .placeholder(R.drawable.loading_image)
        .error(R.drawable.default_movie_image)
        .crossfade(true)
        .build(),
    modifier = Modifier.width(120.dp).height(180.dp), // 固定尺寸，可根据需求调整
    contentDescription = null,
    contentScale = ContentScale.Crop,
)

或者在父布局中约束尺寸（比如列表项用Card包裹）：

Card(modifier = Modifier.width(120.dp).height(180.dp)) {
    AsyncImage(
        model = ImageRequest.Builder(LocalContext.current)
            .data(stringResource(id = R.string.base_image_url) + movie.posterPath)
            .placeholder(R.drawable.loading_image)
            .error(R.drawable.default_movie_image)
            .crossfade(true)
            .build(),
        modifier = Modifier.fillMaxSize(),
        contentDescription = null,
        contentScale = ContentScale.Crop,
    )
}

方案3：指定列表页图片加载尺寸 #

在列表页的ImageRequest中明确指定加载尺寸，让Coil加载适配列表项尺寸的图片，避免大尺寸图片被缓存复用。

列表页修改后代码：

val density = LocalDensity.current
AsyncImage(
    model = ImageRequest.Builder(LocalContext.current)
        .data(stringResource(id = R.string.base_image_url) + movie.posterPath)
        .placeholder(R.drawable.loading_image)
        .error(R.drawable.default_movie_image)
        .crossfade(true)
        // 将dp转换为像素，指定加载尺寸
        .size(Size(with(density) { 120.dp.toPx().toInt() }, with(density) { 180.dp.toPx().toInt() }))
        .build(),
    modifier = Modifier.fillMaxSize(),
    contentDescription = null,
    contentScale = ContentScale.Crop,
)

内容的提问来源于stack exchange，提问作者Phan Lễ Thăng