[英]How to show a custom composable placeholder using Coil in Jetpack Compose?
I need to show a custom placeholder in Jetpack Compose using Coil, but that placeholder is not a drawable, it is a composable function that I customized.我需要使用 Coil 在 Jetpack Compose 中显示自定义占位符,但该占位符不是可绘制的,它是我自定义的可组合函数。 Is it possible to do this with the Coil?用线圈可以做到这一点吗? This is the code snippet where I use the Coil:这是我使用线圈的代码片段:
Image(
modifier = Modifier
.size(120.dp)
.align(Alignment.CenterHorizontally),
painter = rememberImagePainter(
data = entry.imageUrl,
builder = {
crossfade(true)
MyPlaceholder(resourceId = R.drawable.ic_video)
},
),
contentDescription = entry.pokemonName
)
This is my custom placeholder compose function:这是我的自定义占位符组合函数:
@Composable
fun MyPlaceholder(@DrawableRes resourceId: Int) {
Surface(
modifier = Modifier.fillMaxSize(),
color = Color(0xFFE0E0E0)
) {
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center,
) {
Surface(
modifier = Modifier.size(30.dp),
shape = CircleShape,
color = Color.White
) {
Image(
modifier = Modifier
.padding(
PaddingValues(
start = 11.25.dp,
top = 9.25.dp,
end = 9.25.dp,
bottom = 9.25.dp
)
)
.fillMaxSize(),
painter = painterResource(id = resourceId),
contentDescription = null
)
}
}
}
}
My gradle (Coil):我的毕业(线圈):
// Coil
implementation 'io.coil-kt:coil-compose:1.4.0'
Coil has no built-in support for composable placeholders. Coil 没有对可组合占位符的内置支持。
You can put your composable inside Box
and display the placeholder over Image
depending on the state.您可以将可组合内容放入Box
并根据状态在Image
上显示占位符。
In my example I display it if the state is Loading
or Error
.在我的示例中,如果状态为Loading
或Error
我会显示它。 You can add another view parameter for the Error
case and use Crossfade
instead of AnimatedVisibility
.您可以为Error
情况添加另一个视图参数并使用Crossfade
而不是AnimatedVisibility
。
Also I add Modifier.matchParentSize()
to the Image
to follow parent size calculated on the modifier parameter.此外,我将Modifier.matchParentSize()
添加到Image
以遵循在修饰符参数上计算的父级大小。 You can't pass modifier parameter directly to Image
, because modifiers like align
only work for direct children, that's why you alway have to pass it to the container view.您不能将修饰符参数直接传递给Image
,因为像align
这样的修饰符仅适用于直接子级,这就是您始终必须将其传递给容器视图的原因。
@Composable
fun Image(
painter: ImagePainter,
placeholder: @Composable () -> Unit,
contentDescription: String?,
modifier: Modifier = Modifier,
alignment: Alignment = Alignment.Center,
contentScale: ContentScale = ContentScale.Fit,
alpha: Float = DefaultAlpha,
colorFilter: ColorFilter? = null,
) {
Box(modifier) {
Image(
painter = painter,
contentDescription = contentDescription,
alignment = alignment,
contentScale = contentScale,
alpha = alpha,
colorFilter = colorFilter,
modifier = Modifier.matchParentSize()
)
AnimatedVisibility(
visible = when (painter.state) {
is ImagePainter.State.Empty,
is ImagePainter.State.Success,
-> false
is ImagePainter.State.Loading,
is ImagePainter.State.Error,
-> true
}
) {
placeholder()
}
}
}
Usage:用法:
Image(
painter = rememberImagePainter(imageUrl),
placeholder = {
CustomComposableView(...)
},
contentDescription = "...",
modifier = Modifier
...
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.