Android Jetpack Compose中LazyColumn滚动时暂停Coil图片加载

Coil本身提供了控制图片加载暂停/恢复的API，结合Compose列表组件（如LazyColumn/LazyRow）的滚动状态监听，就能实现和Glide搭配RecyclerView类似的效果，具体步骤如下：

1. 获取列表的滚动状态 #

在Compose中，LazyColumn/LazyRow的滚动状态由LazyListState管理，先用rememberLazyListState()创建并关联到列表组件：

val listState = rememberLazyListState()
LazyColumn(state = listState) {
    // 列表项内容
}

2. 监听滚动状态并控制Coil加载 #

通过LaunchedEffect监听listState.isScrollInProgress的变化，根据滚动状态调用Coil的ImageLoader的pause()和resume()方法：

val imageLoader = LocalImageLoader.current
LaunchedEffect(listState.isScrollInProgress) {
    if (listState.isScrollInProgress) {
        imageLoader.pause()
    } else {
        imageLoader.resume()
    }
}

3. 额外优化：避免重复触发 #

如果担心滚动状态频繁切换导致重复调用暂停/恢复，可以增加一个状态变量记录当前加载状态，减少不必要的API调用：

val imageLoader = LocalImageLoader.current
val isLoadingPaused = remember { mutableStateOf(false) }

LaunchedEffect(listState.isScrollInProgress) {
    val shouldPause = listState.isScrollInProgress
    if (shouldPause != isLoadingPaused.value) {
        isLoadingPaused.value = shouldPause
        if (shouldPause) {
            imageLoader.pause()
        } else {
            imageLoader.resume()
        }
    }
}

注意事项 #

• 如果你是自定义的ImageLoader实例，直接使用该实例调用pause()/resume()即可，无需通过LocalImageLoader获取。
• pause()会暂停所有当前的图片加载请求，滚动停止后resume()会恢复这些请求，不会丢失未完成的加载任务。
• 该逻辑同样适用于LazyVerticalGrid/LazyHorizontalGrid等其他Compose懒加载列表组件。

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