You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在Jetpack Compose中使用Coil展示自定义Composable占位图?

可以实现,但你当前的写法是错误的。rememberImagePainter的builder参数是ImageRequest的构造作用域,不属于Composable上下文,不能直接在里面调用自定义的Composable占位函数。


方案1:继续使用Coil 1.4.0版本

通过监听ImagePainter的加载状态,在外层嵌套布局根据状态切换显示内容即可,无需修改现有依赖和自定义占位函数逻辑:

Box(
    modifier = Modifier
        .size(120.dp)
        .align(Alignment.CenterHorizontally)
) {
    val painter = rememberImagePainter(
        data = entry.imageUrl,
        builder = {
            crossfade(true)
        }
    )
    // 根据加载状态切换显示内容
    when (painter.state) {
        is ImagePainter.State.Loading,
        is ImagePainter.State.Error -> {
            MyPlaceholder(resourceId = R.drawable.ic_video)
        }
        else -> {
            Image(
                painter = painter,
                contentDescription = entry.pokemonName,
                modifier = Modifier.fillMaxSize()
            )
        }
    }
}

方案2:升级到Coil 2.x版本(更推荐)

Coil 2.x版本的Compose组件原生支持Composable类型的占位符API,使用更简洁。
首先修改Gradle依赖:

// Coil 2.x 稳定版依赖
implementation 'io.coil-kt:coil-compose:2.5.0'

之后直接使用AsyncImage组件,在对应参数传入自定义Composable即可:

AsyncImage(
    model = entry.imageUrl,
    contentDescription = entry.pokemonName,
    modifier = Modifier
        .size(120.dp)
        .align(Alignment.CenterHorizontally),
    // 加载中占位
    placeholder = {
        MyPlaceholder(resourceId = R.drawable.ic_video)
    },
    // 加载失败占位,可自定义也可复用占位组件
    error = {
        MyPlaceholder(resourceId = R.drawable.ic_video)
    },
    crossfade = true
)

内容的提问来源于stack exchange,提问作者Pierre Vieira

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.27 17:24:07