Glide Compose加载图片仅显示局部的问题求助

问题现象 #

• 使用Compose的rememberAsyncImagePainter（Glide）加载图片时，仅显示图片顶部区域，切换屏幕后才会正常加载完整；XML实现无此问题
• 换用Coil后情况有所改善，但偶尔仍会出现相同问题
• 拍摄新照片后立即跳转到加载页面，图片几乎总是只显示一半；等待1-2秒再跳转则显示正常

可能原因 #

1. 图片文件未完全写入：新拍摄的照片立即跳转时，系统可能还在将图片数据写入磁盘，此时读取的文件不完整，导致加载异常
2. LazyGrid布局测量滞后：LazyVerticalGrid的Item首次布局时，Image的尺寸可能尚未稳定，图片加载库根据临时尺寸加载后，未在尺寸变化时重新请求加载
3. Painter状态更新不及时：rememberAsyncImagePainter的缓存策略未正确响应布局变化，导致图片未重新绘制
4. Item Key策略不合理：使用index作为Item Key，列表变化时可能触发Item复用，导致图片加载状态未更新

解决方案 #

1. 确保图片文件写入完成后再跳转 #

拍摄照片后，等待媒体库扫描完成或文件写入完成再跳转页面：

• 监听媒体库变化：

private fun registerMediaObserver(context: Context, onMediaAdded: (Uri) -> Unit) {
    val observer = object : ContentObserver(Handler(Looper.getMainLooper())) {
        override fun onChange(selfChange: Boolean, uri: Uri?) {
            uri?.let(onMediaAdded)
        }
    }
    context.contentResolver.registerContentObserver(
        MediaStore.Images.Media.EXTERNAL_CONTENT_URI,
        true,
        observer
    )
}

• 验证文件完整性：

// 拍照后等待文件可完整读取再跳转
val photoFile = createImageFile()
// 执行拍照逻辑...
runCatching {
    photoFile.inputStream().use { it.readBytes() }
}.onSuccess {
    navigateToDetailsScreen()
}

2. 强制Image在尺寸变化时重新加载 #

通过onSizeChanged监听Image尺寸变化，以尺寸作为Painter的Key，触发重新加载：

@Composable
fun GridPhotoItem(photo: String) {
    var imageSize by remember { mutableStateOf(IntSize.Zero) }
    
    val painter = rememberAsyncImagePainter(
        model = photo,
        key = imageSize // 尺寸变化时重建Painter
    )
    
    Image(
        painter = painter,
        contentDescription = "Photo",
        contentScale = ContentScale.Crop,
        modifier = Modifier
            .fillMaxWidth()
            .height(200.dp)
            .padding(8.dp)
            .onSizeChanged { imageSize = it }
    )
}

3. 优化LazyGrid的Item Key策略 #

改用图片文件的唯一标识（如文件路径）作为Key，避免Index复用导致的状态异常：

LazyVerticalGrid(
    columns = GridCells.Fixed(2),
    contentPadding = PaddingValues(12.dp, 16.dp, 12.dp, 16.dp),
    state = gridState
) {
    itemsIndexed(items = photos, key = { _, photo ->
        photo.absolutePath // 使用文件路径作为唯一Key
    }) { _, photo ->
        GridPhotoItem(photo.absolutePath)
    }
}

4. 改用Coil的AsyncImage组件（推荐） #

Coil的AsyncImage组件内部已处理布局变化和状态更新，替代自定义Image可避免大部分问题：

@Composable
fun GridPhotoItem(photo: String) {
    AsyncImage(
        model = photo,
        contentDescription = "Photo",
        contentScale = ContentScale.Crop,
        modifier = Modifier
            .fillMaxWidth()
            .height(200.dp)
            .padding(8.dp)
    )
}

5. 临时禁用硬件加速排查 #

部分设备的硬件加速可能导致绘制异常，可临时禁用Image的硬件加速验证：

Image(
    // ...其他参数
    modifier = Modifier
        .fillMaxWidth()
        .height(200.dp)
        .padding(8.dp)
        .graphicsLayer(hardwareAccelerationEnabled = false)
)

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