如何在 Jetpack Compose 中修改线圈图像占位符的颜色和大小

Question

我1.3.2在 Jetpack Compose 中使用 Coil，我有一个Image像这样的

Image(
    painter = rememberImagePainter(
        data = imageUrl,
        onExecute = { _, _ -> true },
        builder = {
            placeholder(R.drawable.icon)
        }
    ),
    contentScale = ContentScale.FillWidth,
    contentDescription = null,
    modifier = Modifier
        .fillMaxWidth()
        .aspectRatio(1f)
)

如何为占位符图标设置自定义颜色和大小？我在文档
中没有找到任何示例

Answer 1

您可以使用painter.state查看图像是否仍在加载，并使用Box显示所需的占位符。请注意，Image要加载的必须位于视图层次结构中，仅定义rememberImagePainter不会开始加载。

您可以使用Image或Icon作为占位符：如果您需要更改色调颜色，第二个选项看起来更干净：

Box(contentAlignment = Alignment.Center) {
    val painter = rememberImagePainter(data = imageUrl)
    Image(
        painter = painter,
        contentScale = ContentScale.FillWidth,
        contentDescription = null,
        modifier = Modifier
            .fillMaxWidth()
            .aspectRatio(1f)
    )
    if (painter.state !is ImagePainter.State.Success) {
        Icon(
            painter = painterResource(id = R.drawable.icon),
            contentDescription = null,
            tint = Color.Blue,
            modifier = Modifier.size(100.dp)
        )
    }
}

我用来contentAlignment = Alignment.Center将静态大小占位符放在 的中心Box，您也可以添加Modifier.matchParentSize()到占位符，使其与图像大小相同，用于fillMaxSize(part)获取part父空间等。

您也可以使用AnimatedVisibility而不是if添加动画。