Kotlin Compose：LazyColumn图片加载顺序混乱及加载触发异常解决

我有一批网络图片列表要加载到LazyColumn里，现在遇到两个问题：

1. 部分图片加载速度不一致，导致显示顺序混乱；
2. 有时倒数第二个图片（索引lastIndex-1）会先加载完成，进而提前触发ViewModel获取新数据的逻辑，不符合预期。

现有基础代码：

val state = viewModel.photos.collectAsState()
val lastIndex = state.value.lastIndex
LazyColumn {
    itemsIndexed(state.value) { i, photo ->
    
        AsyncImage(
            model = photo.urls.regular,
            contentDescription = null,
            modifier = Modifier.fillMaxWidth(),
        )

        if (i >= lastIndex-1 && !viewModel.isLoading.value) {
            viewModel.getPhotos(6)
        }
    }
}

同时我还有基于Coil的手动实现代码：

val model = ImageRequest.Builder(LocalContext.current)
            .data(photo.urls.regular)
            .size(Size.ORIGINAL)
            .crossfade(true)
            .build()

val painter = rememberAsyncImagePainter(model)

Image(
    painter = painter,
    contentDescription = null,
    modifier = Modifier.fillMaxWidth(),
)

一、解决图片加载顺序混乱问题 #

图片显示顺序混乱本质是异步加载完成时机不同，但LazyColumn的item布局是按列表顺序渲染的，只是图片加载完成后才替换占位。要保证视觉上的顺序一致，核心是给每个图片项添加占位布局，并且让占位高度固定（或根据图片比例预留），避免加载完成后布局跳动：

1. 给AsyncImage加占位和错误状态 #

利用Coil的AsyncImage自带参数，添加加载中/失败的占位图：

AsyncImage(
    model = photo.urls.regular,
    contentDescription = null,
    modifier = Modifier.fillMaxWidth(),
    placeholder = painterResource(R.drawable.placeholder_image), // 加载中占位图
    error = painterResource(R.drawable.error_image), // 加载失败图
    contentScale = ContentScale.Crop // 统一图片缩放规则
)

2. 固定图片项高度（可选） #

如果图片比例固定，提前计算高度，避免加载完成后布局重排：

// 假设图片是16:9比例
val screenWidth = LocalConfiguration.current.screenWidthDp
val imageHeight = (screenWidth * 9 / 16).dp

AsyncImage(
    model = photo.urls.regular,
    contentDescription = null,
    modifier = Modifier
        .fillMaxWidth()
        .height(imageHeight),
    placeholder = painterResource(R.drawable.placeholder_image),
    contentScale = ContentScale.Crop
)

二、解决提前触发分页加载的问题 #

当前分页触发逻辑写在itemsIndexed的item内部，每次item重组（包括图片加载完成）都会执行判断，这是提前触发的根源。正确做法是监听LazyColumn的滚动状态，仅当用户滚动到目标位置时触发加载：

val state = viewModel.photos.collectAsState()
val lazyListState = rememberLazyListState()
val lastIndex = state.value.lastIndex

// 监听滚动状态，触发分页
LaunchedEffect(lazyListState) {
    snapshotFlow { lazyListState.layoutInfo.visibleItemsInfo }
        .distinctUntilChanged()
        .collect { visibleItems ->
            val lastVisibleItem = visibleItems.lastOrNull()
            if (lastVisibleItem != null 
                && lastVisibleItem.index >= lastIndex - 1 
                && !viewModel.isLoading.value
                && state.value.isNotEmpty()) {
                viewModel.getPhotos(6)
            }
        }
}

LazyColumn(state = lazyListState) {
    itemsIndexed(state.value) { i, photo ->
        AsyncImage(
            model = photo.urls.regular,
            contentDescription = null,
            modifier = Modifier.fillMaxWidth(),
            placeholder = painterResource(R.drawable.placeholder_image)
        )
    }
}

该逻辑仅关注用户滚动位置，和图片加载状态完全无关，从根源解决提前触发问题。

三、预加载所有图片后再显示LazyColumn #

如果一定要等所有图片加载完成再进入LazyColumn，可以用Coil的ImageLoader批量预加载，监听预加载状态：

1. ViewModel中添加预加载逻辑 #

class PhotoViewModel : ViewModel() {
    private val _preloadComplete = MutableStateFlow(false)
    val preloadComplete = _preloadComplete.asStateFlow()
    private val imageLoader = ImageLoader(Application()) // 或使用全局ImageLoader

    fun preloadPhotos(photos: List<Photo>) {
        viewModelScope.launch {
            val preloadRequests = photos.map { photo ->
                ImageRequest.Builder(Application())
                    .data(photo.urls.regular)
                    .size(Size.ORIGINAL)
                    .build()
            }
            // 批量执行预加载
            preloadRequests.forEach { request ->
                imageLoader.execute(request)
            }
            _preloadComplete.value = true
        }
    }
}

2. UI层根据预加载状态切换界面 #

val state = viewModel.photos.collectAsState()
val preloadComplete = viewModel.preloadComplete.collectAsState()

LaunchedEffect(state.value) {
    if (state.value.isNotEmpty() && !preloadComplete.value) {
        viewModel.preloadPhotos(state.value)
    }
}

// 预加载中显示加载动画，完成后显示LazyColumn
if (!preloadComplete.value) {
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        CircularProgressIndicator()
    }
} else {
    LazyColumn {
        items(state.value) { photo ->
            AsyncImage(
                model = photo.urls.regular,
                contentDescription = null,
                modifier = Modifier.fillMaxWidth()
            )
        }
    }
}

⚠️ 注意：此方案仅适合图片数量较少的场景，大量图片预加载会占用过多内存和带宽，不推荐在大规模列表中使用。

四、基于手动Coil Painter的优化 #

如果使用手动rememberAsyncImagePainter，可以监听加载状态，避免布局混乱：

val model = ImageRequest.Builder(LocalContext.current)
    .data(photo.urls.regular)
    .size(Size.ORIGINAL)
    .crossfade(true)
    .build()

val painter = rememberAsyncImagePainter(model)
val painterState = painter.state

when (painterState) {
    is AsyncImagePainter.State.Loading -> {
        Image(
            painter = painterResource(R.drawable.placeholder_image),
            contentDescription = null,
            modifier = Modifier.fillMaxWidth()
        )
    }
    is AsyncImagePainter.State.Error -> {
        Image(
            painter = painterResource(R.drawable.error_image),
            contentDescription = null,
            modifier = Modifier.fillMaxWidth()
        )
    }
    else -> {
        Image(
            painter = painter,
            contentDescription = null,
            modifier = Modifier.fillMaxWidth()
        )
    }
}

内容的提问来源于stack exchange，提问作者Максим Зозуляк