如何在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
相关产品推荐
相关产品推荐

