Jetpack Compose中Coil封装的NetworkImage在LazyRow内加载为空如何解决

核心根因 #

你遇到的问题本质是Lazy列表子项无明确尺寸约束，导致Coil图片加载流程未触发，具体原因和对应修复方案如下：

1. 尺寸约束缺失（最常见原因） #

你在LazyRow的子项中给NetworkImage设置了Modifier.fillMaxSize()，但LazyRow本身不会给子项提供固定宽高约束，fillMaxSize会导致子项测量结果为0。Coil的rememberImagePainter默认需要组件有明确尺寸才会发起网络请求，因此painter始终停留在初始状态，没有进入加载/错误流程，最终渲染空白。

修复方法：给Lazy子项明确设置固定宽高，示例：

LazyRow(modifier = modifier) {
    items(items = urls, key = { it }) { url ->
        NetworkImage(
            url = url,
            contentScale = ContentScale.Crop,
            // 替换fillMaxSize为明确尺寸，根据业务调整数值即可
            modifier = Modifier.size(140.dp, 200.dp),
            onLoading = {
                ConstraintLayout(
                    modifier = Modifier.fillMaxSize()
                ) {
                    val indicator = createRef()
                    CircularProgressIndicator(
                        modifier = Modifier.constrainAs(indicator) {
                            top.linkTo(parent.top)
                            bottom.linkTo(parent.bottom)
                            start.linkTo(parent.start)
                            end.linkTo(parent.end)
                        }
                    )
                }
            },
            onError = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_warning),
                    contentDescription = "",
                    tint = Color.Red
                )
            }
        )
    }
}

2. Lazy列表无唯一Key导致状态错乱 #

Lazy列表默认没有指定条目Key时，滑动重组会复用组合状态，可能导致painter和url的对应关系错乱，加载无法触发。
修复方法：给items添加唯一key，假设url是唯一标识可直接使用：

items(items = urls, key = { it }) { url -> 
    // 原有逻辑不变
}

3. 可选优化：组件状态渲染逻辑优化 #

你当前的NetworkImage中，Loading、Error状态展示时，Image组件仍然在下层渲染，会产生冗余绘制，建议修改为状态分支渲染：

Box(modifier = modifier) {
    val painter = rememberImagePainter(
        data = url,
        builder = {
            placeholderDrawableRes?.let {
                placeholder( drawableResId = it )
            }
            error(R.drawable.ic_warning)
            crossFade?.let {
                crossfade(durationMillis = it)
            }
            transformations?.let {
                transformations(transformations = it)
            }
        }
    )
    when (painter.state) {
        is ImagePainter.State.Loading -> onLoading()
        is ImagePainter.State.Error -> onError()
        else -> Image(
            painter = painter,
            contentDescription = contentDescription,
            contentScale = contentScale,
            alignment = alignment,
            alpha = alpha,
            colorFilter = colorFilter
        )
    }
}

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