Jetpack Compose LazyColumn中自定义图片加载组件偶现裁剪问题求助

我正在为Jetpack Compose构建一款图片加载库，Coil无法满足需求，因此参考Coil的AsyncImage实现了AsyncMedia组件。但将其用于LazyColumn列表项时，快速滚动后停止会偶现图片裁剪（截图显示图片被异常截断），图片文件本身无问题；将该列表项滚出屏幕再返回后，图片显示恢复正常，而Coil不存在此问题。已尽可能模仿Coil的实现（包括自定义Painter等），但问题仍未解决。

可能的原因 #

• 组件复用与状态重置不彻底
  LazyColumn会复用列表项Composable，若AsyncMedia的内部状态（比如图片尺寸、Painter的绘制参数）在复用前未完全重置，可能导致旧状态残留，新加载的图片使用了旧的裁剪参数。Coil的AsyncImage在复用处理上做了严格的状态清理，确保每次复用都能重新计算正确的绘制参数。

• 图片加载与Compose重组的时序问题
  快速滚动时，列表项可能在图片加载完成前就被复用或重组，此时Painter可能拿到了未完全初始化的尺寸信息，导致绘制时错误裁剪。Coil通过DisposableEffect或LaunchedEffect严格管理加载任务与Compose生命周期的绑定，确保加载完成时组件处于正确状态。

• 自定义Painter的绘制逻辑缺陷
  若自定义Painter未正确处理onDraw中的尺寸变化，比如缓存了旧的画布尺寸或缩放比例，在组件复用后，新的图片使用了旧的绘制参数，就会出现裁剪。Coil的AsyncImagePainter会在每次尺寸变化时重新计算缩放和裁剪逻辑，确保适配当前组件的尺寸。

• 加载任务的取消与复用机制不完善
  快速滚动时，未及时取消不可见列表项的加载任务，导致已复用的列表项收到旧任务的加载结果，错误地显示旧图片的裁剪状态。Coil的加载任务会与Composable的生命周期绑定，组件不可见时自动取消任务，避免结果混乱。

解决思路 #

1. 严格处理组件复用的状态重置
   在AsyncMedia组件中，使用key修饰符绑定图片请求的唯一标识（比如图片URL+尺寸参数），确保每次请求变化时，组件完全重组而非复用旧状态。示例：

AsyncMedia(
    model = imageUrl,
    contentDescription = null,
    modifier = Modifier.key(imageUrl)
)

同时，在组件内部的remember状态对象中，确保每次请求变化时重置所有与图片尺寸、绘制相关的参数。

2. 对齐Coil的生命周期绑定逻辑
   使用DisposableEffect绑定图片加载任务，在组件进入不可见状态或重组时取消旧任务，避免旧结果干扰新组件。示例：

DisposableEffect(model) {
    val job = launch {
        // 执行图片加载任务
    }
    onDispose {
        job.cancel()
    }
}

确保加载完成后，仅当当前组件的model未变化时才更新Painter状态。

3. 修复自定义Painter的绘制逻辑
   在自定义Painter的onDraw方法中，每次绘制都基于当前的size参数重新计算缩放比例和裁剪区域，不要缓存尺寸相关的变量。示例：

override fun onDraw(canvas: Canvas, size: Size) {
    val bitmap = // 当前加载的图片Bitmap
    val scale = calculateScale(size, bitmap.size)
    val offset = calculateOffset(size, bitmap.size * scale)
    canvas.drawBitmap(bitmap, offset, Paint())
}

确保每次绘制都实时计算适配当前组件尺寸的参数，而非依赖缓存值。

4. 验证加载任务的唯一性
   为每个图片请求生成唯一的标识（比如URL+组件尺寸），确保同一列表项复用后，新请求能覆盖旧请求的结果，避免旧加载结果被错误应用到新图片上。可以在加载任务中加入标识校验，只有当当前请求标识与组件的当前标识一致时，才更新UI状态。

5. 对比Coil的源码实现细节
   重点查看Coil的AsyncImage、AsyncImagePainter以及SubcomposeAsyncImage中的以下逻辑：

• 状态管理（rememberAsyncImagePainter中的状态重置）
• 加载任务的生命周期绑定（DisposableEffect的使用）
• Painter的尺寸适配逻辑（Scale和ContentScale的处理）
• 组件复用的key处理（key修饰符的使用场景）

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